# SaaS & Technology Landing Page — Design Specification
**Slug:** /industries/saas | **Accent:** #8B5CF6 / #A855F7 | **Dark BG:** #0B0F1A | **Mockup BG:** #0D1321

---

## A) BUYER JOURNEY & PAGE CONCEPT

**Buyer:** VP Finance / Head of RevOps at growth-stage SaaS ($5M-$100M ARR). 50-500 employees. Landed from Google Ad targeting "dunning management software" ($10-$16 CPC) or "SaaS billing automation" ($12-$18 CPC).

**Mental state on arrival:** Frustrated. Involuntary churn is 30% of total churn and the board keeps asking what they're doing about it. Losing $50K+/month to failed payments. Spending 15 hours/week reconciling Stripe with QuickBooks. Moved to usage-based pricing and the AR process broke. CFO wants exact NRR numbers but they can't isolate involuntary churn from voluntary. Post-ZIRP pressure means every dollar of recovered revenue extends runway.

**2-second test — what they must see above the fold:**
1. What it does: AI-powered failed payment recovery and dunning automation
2. Who for: SaaS finance/RevOps teams (MRR waterfall + dunning pipeline in mockup)
3. Why care: 9% of MRR lost annually to payment failures [Baremetrics]
4. What next: "See Your Recovery Potential" (not "Get Started Free")

**Page killers (instant bounce):** "Get Started Free" generic CTA, dashboards without MRR/ARR/NRR terminology, no Stripe/Chargebee logos visible, unsourced recovery claims, "replace your finance team" messaging, stock photos of laptops, claims of "100% payment recovery."

**Emotional arc mapped to 9 sections:**

| Phase | Emotion | Section | Goal |
|---|---|---|---|
| 1. RECOGNITION | "That's my exact problem" | Hero — pain stat + MRR waterfall dashboard | Hook with 9% MRR stat + product UI showing dunning recovery |
| 2. VALIDATION | "It's worse than I thought" | Problem — 4 sourced revenue leakage cards | Arm them with data to cite to their CFO/board |
| 3. CONTRAST | "There's a better way" | Before/After — manual dunning vs Singoa AI recovery | Show 25-35% recovery → 50-70% recovery transformation |
| 4. EXPLORATION | "Show me the product" | Product Showcase — 4-tab explorer (SaaS-exclusive tabs) | Let them explore dunning, recovery, churn prevention, intelligence |
| 5. CALCULATION | "What's the ROI?" | ROI — interactive MRR recovery calculator | Give CFO a number to approve budget |
| 6. COMPATIBILITY | "Does it work with Stripe?" | Integrations — billing + accounting + CRM logos | Eliminate "will it integrate?" objection |
| 7. TRUST | "Is our data safe?" | Trust — SOC 2, PCI DSS, data security | Address security review requirements |
| 8. ANSWERS | "I have questions" | FAQ — 10 SaaS-specific long-tail SEO questions | Reduce friction, capture search traffic |
| 9. ACTION | "I'm ready to talk" | Final CTA — "See Your Revenue Recovery Potential" | Convert the buyer who scrolled the full page |

---

## B) HERO — MRR Waterfall + Failed Payment Recovery Dashboard

**Layout:** 55/45 split. Left: text column. Right: dashboard mockup. `grid-cols-1 lg:grid-cols-2 gap-12 items-center`. Mockup `hidden lg:block` (text-first on mobile). Section `py-20 md:py-28`.
**BG overlay:** `bg-gradient-to-br from-violet-500/8 via-transparent to-purple-500/4`

### B1: Left Column — Text + CTAs

**Badge:** `<span>SaaS Revenue Recovery</span>` — `inline-block px-4 py-1.5 rounded-full text-sm font-medium bg-violet-500/10 text-violet-400 border border-violet-500/20 mb-6`

**H1:** "Your SaaS Loses 9% of MRR to" + `<span className="bg-gradient-to-r from-violet-500 to-purple-500 bg-clip-text text-transparent">Failed Payments</span>` — `text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-4`

**Pain stat callout:** "20-40% of SaaS churn is involuntary — customers who wanted to stay but couldn't pay." — `text-lg text-violet-300/80 font-medium mb-2` — Source: [ProfitWell/Paddle, Recurly Research]

**Subheadline:** "AI-powered dunning that recovers 50-70% of failed payments with smart retry logic, multi-channel outreach, and payment method updates. Your finance team stays in control." — `text-lg md:text-xl text-gray-300 mb-8` — Source: [Recurly/Churnkey benchmarks]

**CTA row** (`flex flex-col sm:flex-row gap-4 mb-8`):
- Primary: "See Your Recovery Potential" — `px-8 py-4 bg-gradient-to-r from-violet-500 to-purple-500 rounded-lg font-semibold text-lg hover:shadow-lg hover:shadow-violet-500/25` — scrolls to #roi
- Secondary: "Book a 15-Min Demo" — `px-8 py-4 border border-violet-500/30 rounded-lg font-semibold text-lg hover:bg-violet-500/10` — scrolls to #contact

**Trust row** (`flex flex-wrap gap-4`):
- SOC 2 Type II | PCI DSS Compliant | Stripe & Chargebee Integration
- Each: `<a href="/security">` with `FaShieldAlt text-violet-400` + `text-sm text-gray-400 hover:text-violet-400`

**Animation:** `initial={{ opacity:0, y:20 }} animate={{ opacity:1, y:0 }} transition={{ duration:0.6 }}`

### B2: Right Column — MRRWaterfallDashboard Component

**Wrapper:** `motion.div initial={{ opacity:0, x:30 }} animate={{ opacity:1, x:0 }} transition={{ duration:0.8, delay:0.3 }}`

**Outer frame:** `bg-[#0D1321] rounded-2xl border border-white/10 shadow-2xl shadow-violet-500/5 overflow-hidden`

**Browser chrome bar** (`flex items-center gap-2 px-4 py-3 border-b border-white/10 bg-white/5`):
- 3 dots: `w-3 h-3 rounded-full` at `bg-red-500/60`, `bg-yellow-500/60`, `bg-green-500/60`
- Title: "Singoa — MRR Recovery Dashboard" — `text-xs text-gray-500 ml-2`

**Sidebar navigation** (`w-12 bg-white/3 border-r border-white/5`, vertical icon strip):
- 6 icon slots, each `w-8 h-8 rounded-lg flex items-center justify-center`
- Icons (top to bottom): Dashboard grid, Chart waterfall, Payment retry, Dunning bell, Shield, Settings gear
- 2nd slot (Waterfall) active: `bg-violet-500/20 text-violet-400`
- Others: `text-gray-600 hover:text-gray-400`
- Purpose: Makes mockup look like a real multi-page app, not a single widget

**Content area** (`flex-1 p-4`):

**4 metric cards** (`grid grid-cols-4 gap-3 mb-4`):
Each card: `bg-white/5 rounded-lg p-3 border border-white/5`

| Label | Start -> End | Color | Anim Duration | Format |
|---|---|---|---|---|
| MRR at Risk | $0 -> $47.2K | text-yellow-400 | 1800ms | Counter with $ prefix and K suffix |
| Recovery Rate | 0 -> 68% | text-violet-400 | 1500ms | Counter with % suffix |
| Prevented Churn | 0 -> $124K | text-green-400 | 2000ms | Counter with $ prefix and K suffix |
| NRR Impact | 100 -> 112% | text-emerald-400 | 1500ms | Counter with % suffix |

Counter implementation: Reuse existing `useAnimatedCounter` pattern — `useInView(ref, { once: true })` + `requestAnimationFrame` loop. Label `text-[10px] text-gray-500`. Value `text-lg font-bold`.

**Trend indicators:** Each card gets a small arrow + delta text below value:
- MRR at Risk: `arrow-down 23%` in green-400 (decreasing risk = good)
- Recovery Rate: `arrow-up 41%` in green-400 (improvement from 27% baseline)
- Prevented Churn: `arrow-up $38K` in green-400 (vs last quarter)
- NRR Impact: `arrow-up 8pts` in green-400 (from 104% baseline)

**MRR Waterfall Chart** (`mb-4`):
- Container: `bg-white/5 rounded-lg p-4 border border-white/5`
- Title row: "MRR Waterfall — Last 6 Months" in `text-[11px] text-gray-400 font-medium mb-3`
- 6 month columns (Jul-Dec), each with stacked bars:
  - New MRR: `bg-emerald-400` (bottom segment)
  - Expansion: `bg-blue-400` (stacked above)
  - Contraction: `bg-yellow-400` (negative, extends down)
  - Churned: `bg-red-400` (negative, extends down)
  - **Recovered: `bg-violet-400`** (stacked above, Singoa's impact — GLOWS last)
- Y-axis labels: $0, $100K, $200K, $300K, $400K — `text-[9px] text-gray-600`
- Net MRR line: dashed `stroke-white/40` connecting net values across months, trending upward
- Implementation: SVG `<rect>` elements for bars, `<line>` for net MRR trend
- Animation: Bars build left-to-right with `delay: 0.3 * monthIndex`. Recovered (violet) bar animates LAST per column with a subtle glow pulse: `animate={{ opacity: [0.8, 1, 0.8] }} transition={{ duration: 2, repeat: Infinity }}`
- Legend row below chart: 5 colored dots with labels — `flex gap-4 text-[9px] text-gray-500 mt-2`

**Dunning Pipeline Table — 5 columns:**
Header row: `grid grid-cols-5 text-[10px] text-gray-500 px-3 py-1.5 uppercase tracking-wider`
Columns: `Customer (w-[22%]) | Plan (w-[15%]) | MRR (w-[18%]) | Dunning Status (w-[28%]) | Action (w-[17%])`

**5 data rows** (staggered: `initial={{ opacity:0, x:-10 }} animate={{ opacity:1, x:0 }} transition={{ delay: 1.2 + i * 0.15 }}`):
Each row: `grid grid-cols-5 text-[11px] px-3 py-2.5 bg-white/5 rounded-lg border border-white/5 items-center`

| Customer | Plan | MRR | Dunning Status | Action |
|---|---|---|---|---|
| Acme Corp | Enterprise | $2,400/mo | Card Declined — Smart Retry #2 (4h) | Retry Now |
| DataFlow Inc | Growth | $890/mo | Recovered via Retry #3 | View |
| CloudSync Ltd | Enterprise | $3,200/mo | Dunning Email Sent — Day 3 | Escalate |
| NexGen AI | Starter | $149/mo | Payment Method Updated | View |
| Velocity Labs | Growth | $890/mo | Final Notice — Day 12 of 14 | Call |

**Column styling:**
- Customer: `text-gray-300 font-medium`
- Plan: `text-gray-400`
- MRR: `text-white font-mono font-medium`
- Status colors: Card Declined=`text-yellow-400`, Recovered=`text-green-400`, Email Sent=`text-blue-400`, Updated=`text-green-400`, Final Notice=`text-red-400`
- Action: `text-violet-400 hover:text-violet-300 cursor-pointer`

**Pulsing indicators** (on "Card Declined" and "Final Notice" rows):
`<motion.span animate={{ opacity: [1, 0.4, 1] }} transition={{ duration: 1.5, repeat: Infinity }} className="inline-block w-1.5 h-1.5 rounded-full bg-current mr-1" />`

**SaaS terminology is REAL** — VP Finance/RevOps will recognize instantly:
- MRR, dunning, smart retry, payment method update, escalation
- Plan tiers (Enterprise/Growth/Starter) match real SaaS pricing models
- Day counts in dunning status reflect real dunning window timelines (14-day standard)

### B3: Below-Hero Stat Bar

`grid grid-cols-1 md:grid-cols-3 gap-6 max-w-3xl mx-auto mt-16`
Each card: `bg-white/5 backdrop-blur-sm rounded-xl p-4 border border-white/10 text-center`

| Stat | Label | Source |
|---|---|---|
| 9% | Of MRR lost annually to payment failures | [Baremetrics — SaaS Churn] |
| 20-40% | Of total SaaS churn is involuntary | [ProfitWell/Paddle, Recurly Research] |
| $900K | Annual loss for a $10M ARR company | [Industry benchmark calculation] |

Stat: `text-2xl md:text-3xl font-bold bg-gradient-to-r from-violet-400 to-purple-400 bg-clip-text text-transparent`
Label: `text-sm text-gray-400 mt-1`

---

## C) SECTION-BY-SECTION LAYOUT

### S1: Hero (covered in Section B above)

### S2: Problem — "The Hidden Revenue Leak in Every SaaS Company"

**Layout:** 2x2 card grid (`grid-cols-1 md:grid-cols-2 gap-8`). Section `py-20`.
**BG:** Default dark #0B0F1A, no gradient overlay (breathing room after hero).
**Animation:** Each card `initial={{ opacity:0, y:20 }} whileInView={{ opacity:1, y:0 }} viewport={{ once:true }} transition={{ delay: i * 0.1 }}`

**Header:**
- H2: "The Hidden Revenue Leak" + gradient span "in Every SaaS Company" — `text-3xl md:text-4xl font-bold mb-4`
- Sub: "Payment failures cost approximately 9% of annual revenue without active recovery. For a $10M ARR company, that's $900K/year walking out the door silently." — `text-gray-400 max-w-2xl mx-auto` — Source: [Baremetrics — SaaS Churn]

**4 stat cards** (`bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-violet-500/30 transition-all`):

| Icon | Title | Stat | Body (all sourced) |
|---|---|---|---|
| FaUserSlash text-violet-400 | Involuntary Churn Dominates | 20-40% | "Of total SaaS churn comes from failed payments, not unhappy customers. Credit card decline rates average 10-15% for recurring charges. Without active dunning, only 30% self-recover." Sources: [Recurly Research], [Stripe Revenue Recovery], [Churnkey] |
| FaSync text-violet-400 | Dunning Is Broken | 25-35% | "Average recovery rate with basic email-only dunning. 62% of SaaS companies still rely on generic retry logic with no payment method update flows. Intelligent retry timing recovers 15-25% more than fixed schedules." Sources: [Recurly Research], [ProfitWell/Paddle], [Stripe Revenue Recovery] |
| FaLayerGroup text-violet-400 | Revenue Leakage Compounds | 1-5% | "Of total revenue lost to billing errors, failed upgrades, and uncollected expansion revenue. 42% of SaaS finance teams report difficulty reconciling billing data with their GL. Mid-market SaaS spends 15-20 hrs/week on manual AR." Sources: [MGI Research], [Maxio], [Sage Intacct] |
| FaChartLine text-violet-400 | Expansion Revenue Fails | 2x | "Higher failure rate on expansion charges (upsells, seat additions, overages) vs base subscriptions. Expansion revenue accounts for 30-40% of new ARR at top-quartile companies — but collection is the weak link." Sources: [Bessemer State of the Cloud 2024], [OpenView SaaS Benchmarks] |

Card anatomy:
- Icon container: `p-3 bg-violet-500/10 rounded-xl shrink-0`
- Stat: `text-2xl font-bold text-violet-400` with `statLabel` in `text-xs text-gray-500`
- Body: `text-gray-400 text-sm leading-relaxed`
- Layout: `flex items-start gap-4` (icon left, content right)

**Differentiator:** SaaS uses 2x2 grid with icon+stat+body cards (same pattern as healthcare but different stats/terminology). Construction uses timeline. Legal uses compliance checklist.

### S3: Before/After — Manual Dunning vs Singoa AI Recovery

**Layout:** Side-by-side metrics comparison table (NOT split-screen like healthcare). `grid-cols-1 md:grid-cols-2 gap-6`. Section within Problem section as a sub-block (`mt-16`).
**Animation:** Left column `initial={{ opacity:0, x:-10 }}`, right column `initial={{ opacity:0, x:10 }}`, staggered rows `delay: i * 0.08`

**Left panel — "Manual Dunning (Industry Average)":**
- Container: `bg-red-500/5 rounded-2xl p-6 border border-red-500/20`
- Header: `text-lg font-semibold text-red-400 flex items-center gap-2` with FaExclamationTriangle
- 6 metric rows, each with red X circle:

1. Recovery rate: 25-35% with basic email-only dunning [Recurly]
2. Fixed retry schedule: same time for every card type and bank
3. Single channel: email-only dunning with generic templates
4. No payment method update flow — customer must find settings page
5. Manual reconciliation: 15-20 hrs/week matching Stripe to GL [Sage Intacct]
6. No churn isolation: can't separate involuntary from voluntary in reports

- Bottom stat: `mt-4 pt-4 border-t border-red-500/10 text-sm text-red-400 font-medium` — "Result: 9% of MRR lost annually [Baremetrics]"

**Right panel — "With Singoa AI Recovery":**
- Container: `bg-green-500/5 rounded-2xl p-6 border border-green-500/20`
- Header: `text-lg font-semibold text-green-400 flex items-center gap-2` with FaCheckCircle
- 6 metric rows, each with green check circle:

1. Recovery rate: 50-70% with ML-optimized smart dunning [Recurly/Churnkey]
2. AI retry timing: optimized per card type, bank pattern, customer history
3. Multi-channel: email + in-app + SMS orchestrated dunning sequences
4. Auto payment method update via secure links and network tokenization
5. Auto-reconciliation: billing platform synced to GL in real-time
6. Involuntary churn isolated: NRR/GRR tracked separately with recovery attribution

- Bottom stat: "Result: 50-70% of failed payments recovered [Recurly/Churnkey]" — `text-green-400`

**Differentiator:** SaaS uses red/green metric comparison (recovery-focused). Healthcare uses workflow comparison (manual tasks vs AI tasks). Construction uses timeline slider. Legal uses compliance checklist.

### S4: Product Showcase — 4-Tab Explorer (SaaS-EXCLUSIVE TABS)

**Layout:** Horizontal tab bar + swappable content area (50% text left / 50% mini-mockup right). `grid-cols-1 lg:grid-cols-2 gap-8` inside each tab panel.
**BG:** `bg-gradient-to-b from-transparent via-violet-500/5 to-transparent`
**Section:** `py-20`, `id="solution"`

**Header:**
- H2: "Subscription AR," + gradient span "Finally Automated" — `text-3xl md:text-4xl font-bold mb-4`
- Sub: "Purpose-built for the unique billing workflows of SaaS companies — not a generic AR tool with a subscription label." — `text-gray-400 max-w-2xl mx-auto`

**Tab bar** (`flex gap-1 border-b border-white/10 mb-8`):
- Active tab: `border-b-2 border-violet-500 text-white font-semibold pb-3 px-4`
- Inactive tab: `text-gray-500 pb-3 px-4 hover:text-gray-300 cursor-pointer`
- State: `const [activeTab, setActiveTab] = useState(0)`

**Tab transitions:** `<AnimatePresence mode="wait">` wrapping `<motion.div key={activeTab} initial={{ opacity:0, y:10 }} animate={{ opacity:1, y:0 }} exit={{ opacity:0, y:-10 }} transition={{ duration:0.3 }}>`

**Tab 1 — "Failed Payment Recovery"**
- Left text:
  - Tab title: "Recover Revenue That's Walking Out the Door" — `text-xl font-semibold mb-3`
  - Body: "Real-time detection of failed charges across all payment gateways. ML-optimized retry timing based on card type, bank patterns, and customer payment history — not fixed schedules. Companies using intelligent retry timing recover 15-25% more than fixed-schedule retries."
  - Stat badge: "50-70% recovery rate with smart dunning" — `bg-violet-500/10 text-violet-400 border-violet-500/20 rounded-full text-xs px-3 py-1` — Source: [Recurly/Churnkey benchmarks]
  - CTA link: "Learn more about payment recovery ->" — `text-violet-400 text-sm`
- Right mini-mockup: Recovery funnel donut chart
  - Donut/ring chart with 4 segments:
    - Auto-recovered (smart retry): 40% — `bg-green-400`
    - Dunning-recovered (email/SMS): 25% — `bg-violet-400`
    - Pending recovery: 20% — `bg-yellow-400`
    - Lost (exhausted): 15% — `bg-red-400`
  - Center text: "65% Recovery Rate" in `text-white font-bold text-lg`
  - Ring fills clockwise: `motion.circle` with `strokeDashoffset` animation
  - Below donut: animated counter "$47.2K recovered this month" — `text-violet-400 font-medium`

**Tab 2 — "Smart Dunning Sequences"**
- Left text:
  - Title: "Multi-Channel Dunning That Actually Gets Opened"
  - Body: "Orchestrated outreach across email, in-app notifications, and SMS. Personalized messaging based on customer segment (VIP/Standard/Risk). Pre-dunning alerts notify customers before cards expire. Secure payment method update links — no login required."
  - Stat badge: "62% of SaaS companies still use email-only dunning" — Source: [ProfitWell/Paddle]
  - CTA link: "See dunning automation in action ->"
- Right mini-mockup: Horizontal dunning timeline/swimlane
  - 3 swim lanes: Retry (auto) | Email | In-App/SMS
  - Timeline: Day 0, Day 1, Day 3, Day 7, Day 14
  - Retry lane: dots at Day 0 (failed), Day 1 (retry #1), Day 3 (retry #2), Day 7 (retry #3)
  - Email lane: envelope icons at Day 1 ("Friendly reminder"), Day 7 ("Update payment"), Day 14 ("Final notice")
  - In-App/SMS lane: bell icons at Day 1 (in-app banner), Day 7 (SMS sent)
  - Callout bubble at Day 3: "Smart retry recovered on attempt #2" — `bg-green-500/20 text-green-400 text-[10px] rounded px-2 py-1`
  - Animation: Timeline plays through left-to-right with `delay: 0.3 * stepIndex`
  - Status dots: green=recovered, yellow=pending, red=failed — pulsing on active step

**Tab 3 — "Churn Prevention Engine"**
- Left text:
  - Title: "Stop Involuntary Churn Before It Happens"
  - Body: "AI detects at-risk accounts before they churn. Pre-dunning alerts for expiring cards via network tokenization. Auto-updates payment methods through card-on-file updater services. Escalates high-value accounts to your team for personal outreach. Up to 40% of SaaS churn is involuntary — preventable with the right automation."
  - Stat badge: "20-40% of SaaS churn is involuntary" — Source: [ProfitWell/Paddle, Baremetrics]
  - CTA link: "Explore churn prevention ->"
- Right mini-mockup: Before/after dual line chart
  - Two lines on same axes (6-month view):
    - "Before Singoa" line: red, trending upward (churn rate 8.2% -> 9.1%)
    - "With Singoa" line: green, trending downward (churn rate 8.2% -> 2.1%)
  - SVG `<path>` elements with `motion.path` and `pathLength` animation
  - Annotation callouts at divergence point: "Singoa activated" with arrow
  - Bottom stat: "Involuntary churn: 8.2% -> 2.1%" — `text-green-400 font-bold`
  - Lines draw with `transition={{ duration: 1.5, delay: 0.3 }}`

**Tab 4 — "Revenue Intelligence"**
- Left text:
  - Title: "MRR Waterfall, NRR Tracking, and Recovery Analytics"
  - Body: "Track MRR, ARR, and outstanding balances by plan tier. See which segments have the highest failure rates and why. Isolate involuntary churn from voluntary in your board reporting. NRR/GRR trend lines with recovery attribution. Top-quartile NRR (120%+) companies trade at 2-3x higher revenue multiples."
  - Stat badge: "NRR >120% = 2-3x higher revenue multiples" — Source: [Bessemer State of the Cloud 2024]
  - CTA link: "See revenue intelligence ->"
- Right mini-mockup: Mini MRR waterfall + NRR gauge
  - Compact 3-month waterfall (Oct/Nov/Dec) with stacked bars:
    - New (emerald), Expansion (blue), Contraction (yellow), Churn (red), Recovered (violet)
  - Below: NRR gauge — semicircle meter from 80% to 140%
    - Needle pointing to 112% — `text-violet-400 font-bold`
    - Zones: <100% red, 100-110% yellow, 110-120% green, >120% emerald
    - Label: "Net Revenue Retention" — `text-[10px] text-gray-500`
  - Gauge needle animates from 80% to 112%: `motion.div rotate` animation

**CRITICAL DIFFERENTIATOR:** SaaS uses a 4-tab product explorer with SaaS-specific mini-mockups in each tab. Healthcare also uses tabs but with completely different content (CARC codes, ERA matching, AR aging, patient collections). No other industry page uses this exact tab content. The dunning timeline swimlane (Tab 2) and NRR gauge (Tab 4) are SaaS-exclusive visualizations.

### S5: ROI — Interactive MRR Recovery Calculator

**Layout:** 3 metric cards (`grid-cols-1 md:grid-cols-3 gap-8`) + interactive calculator card below (`max-w-3xl mx-auto mt-12`). Section `py-20`.
**BG:** `bg-gradient-to-b from-transparent via-violet-500/5 to-transparent`

**Header:**
- H2: "What SaaS Teams" + gradient span "Can Expect" — `text-3xl md:text-4xl font-bold mb-4`
- Disclaimer: "Projections based on published benchmarks from Recurly, Churnkey, Baremetrics, ProfitWell, and Bessemer. Actual results vary based on current dunning setup, payment mix, and subscriber base." — `text-center text-gray-500 text-sm mb-12 max-w-2xl mx-auto`

**3 metric cards** (`bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10 text-center hover:border-violet-500/30`):

| Value | Label | Description | Source |
|---|---|---|---|
| 50-70% | Failed Payment Recovery | Smart dunning with ML-optimized retry timing recovers majority of failed charges. Up from 25-35% with basic email-only dunning. | [Recurly Research, Churnkey] |
| 20-30% | DSO Reduction | Automated collections compress cash conversion cycle. SaaS B2B DSO from 50-70 days toward 35-day target. | [Tesorio, HighRadius, Maxio] |
| ~9% | Revenue at Risk Annually | MRR lost to payment failures without active recovery. For $10M ARR = $900K/year preventable loss. | [Baremetrics, ProfitWell/Paddle] |

Value: `text-4xl md:text-5xl font-bold bg-gradient-to-r from-violet-400 to-purple-400 bg-clip-text text-transparent mb-2`
Label: `text-lg font-semibold mb-2`
Description: `text-gray-400 text-sm`

**Interactive ROI Calculator** (`bg-gradient-to-br from-violet-500/10 to-purple-500/10 rounded-2xl p-8 border border-violet-500/20`):
- Header: FaCalculator icon + "MRR Recovery Calculator" — `text-xl font-semibold`
- 3 input fields (`grid-cols-1 sm:grid-cols-3 gap-4 mb-6`):
  - Annual Recurring Revenue ($): `<input type="number" defaultValue={10000000}>` — `bg-white/5 rounded-lg p-3 border border-white/10 text-white`
  - Monthly Failed Payment Rate (%): `<input type="number" defaultValue={5} min={0} max={100}>` — same styling
  - Current Recovery Rate (%): `<input type="number" defaultValue={30} min={0} max={100}>` — same styling
- Calculation logic:
  - `monthlyAtRisk = ARR / 12 * (failRate / 100)`
  - `currentRecovery = monthlyAtRisk * (currentRate / 100)`
  - `singoaRecovery = monthlyAtRisk * 0.65` (65% recovery — conservative mid-range of 50-70%)
  - `additionalRecovery = singoaRecovery - currentRecovery`
  - `annualImpact = additionalRecovery * 12`
- Result display (`bg-white/5 rounded-lg p-6 text-center grid grid-cols-1 md:grid-cols-3 gap-4`):
  - "Monthly MRR at Risk": `$monthlyAtRisk` — `text-yellow-400 text-2xl font-bold`
  - "Additional Monthly Recovery": `$additionalRecovery` — `text-violet-400 text-3xl font-bold` (hero number)
  - "Annual Revenue Impact": `$annualImpact` — `text-green-400 text-2xl font-bold`
  - Subtext: "Based on 65% recovery rate (conservative mid-range of 50-70% benchmark)" — `text-xs text-gray-500 mt-2`
- CTA: "Get Your Custom Recovery Report" + FaArrowRight — gradient button -> scrolls to #contact
- `trackEvent('industry_cta_click', { industry: 'saas', cta_type: 'roi_calculator' })`

**Differentiator:** SaaS ROI calculator uses 3 inputs (ARR, fail rate, current recovery) and shows the DELTA — what Singoa adds on top of current recovery. Healthcare uses static assumptions (claims volume, denial rate, rework cost). No other industry has a 3-input interactive calculator.

### S6: Integrations — "Works With Your Existing SaaS Stack"

**Layout:** 3-column category cards (`grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto`). Section `py-20`.
**BG:** Default dark, no overlay (breathing room).

**Header:**
- H2: "Integrates with Your" + gradient span "Existing SaaS Stack"
- Sub: "Singoa doesn't replace your billing platform — it completes your AR. Connect Stripe, Chargebee, or Recurly in minutes and start recovering failed payments immediately."

**3 category cards** (`bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-violet-500/30`):

| Category | Icon | Items |
|---|---|---|
| Billing & Subscription | FaCreditCard text-violet-400 | Stripe, Chargebee, Recurly, Zuora, Paddle, Maxio (SaaSOptics) |
| Accounting & ERP | FaFileInvoiceDollar text-violet-400 | QuickBooks, Xero, NetSuite, Sage Intacct |
| CRM & RevOps | FaChartLine text-violet-400 | Salesforce, HubSpot, Plaid, Gmail, Outlook, Slack |

Items as pill badges: `px-3 py-1.5 bg-white/5 rounded-lg text-sm text-gray-300 border border-white/10`
- Stripe and Chargebee pills get a subtle violet glow: `border-violet-500/30 bg-violet-500/5` (most common SaaS stack)

**Integration flow visual** (below cards, `mt-8`):
- Horizontal flow diagram: `[Stripe/Chargebee] --> [Singoa] --> [QBO/Xero/NetSuite]`
- 3 boxes connected by animated dashed lines
- Left box: "Your Billing Platform" with Stripe/Chargebee logos — `bg-white/5 rounded-xl p-4`
- Center box: "Singoa AI Recovery" with Singoa logo — `bg-violet-500/10 rounded-xl p-4 border border-violet-500/30` (highlighted)
- Right box: "Your Accounting" with QBO/Xero logos — `bg-white/5 rounded-xl p-4`
- Dashed lines: `motion.div` with animated dash offset, `stroke-violet-400/40`
- Data flow labels on lines: "Failed payments detected" (left) and "Recovered revenue synced" (right) — `text-[9px] text-gray-500`

Footer: "Don't see your billing platform? We add new integrations every month." — `text-violet-400 hover:text-violet-300 underline` -> scrolls to #contact

**Differentiator:** SaaS leads with billing platforms (Stripe/Chargebee/Recurly). Healthcare leads with EHR systems (Epic/Cerner). Construction leads with Sage/Procore. The integration flow diagram showing Singoa as the "AR layer between billing and accounting" is SaaS-exclusive.

### S7: Trust & Security — "Enterprise-Grade Security for Your Revenue Data"

**Layout:** Single centered card with 3-column grid inside (`grid-cols-1 md:grid-cols-3 gap-8`). Section `py-20`.
**BG:** Subtle gradient `from-transparent via-violet-500/3 to-transparent`

**Header:**
- H2: "Built for SaaS" + gradient span "Security Standards"
- Sub: "Your subscription data flows through Singoa. Here's how we protect it."

**3 security columns** (each centered, `text-center`):

| Badge | Title | Details |
|---|---|---|
| FaShieldAlt text-3xl text-violet-400 | SOC 2 Type II | Independent third-party audit of security controls. Continuous monitoring. Annual recertification. Covers availability, confidentiality, and processing integrity. Required by most SaaS procurement teams. |
| FaShieldAlt text-3xl text-violet-400 | PCI DSS Compliant | Payment card data handled per PCI DSS standards. No raw card numbers stored. Tokenized payment references only. Secure payment method update links for customers. |
| FaShieldAlt text-3xl text-violet-400 | Data Encryption | AES-256 encryption at rest. TLS 1.3 in transit. Role-based access controls (RBAC). Immutable audit trails for every payment action. API keys encrypted and rotated. |

Each column: `bg-white/5 rounded-2xl p-6 border border-white/10` with icon centered above title.

**Note:** SaaS security section is lighter than healthcare's standalone compliance section (no HIPAA/BAA needed). It addresses the standard SaaS procurement security review checklist without being a full compliance deep-dive. Healthcare gets a full section because HIPAA is the #1 purchase blocker; SaaS buyers care about SOC 2 and PCI DSS but it's not the primary decision driver.

### S8: FAQ — 10 Questions Targeting Long-Tail SEO

**Layout:** Accordion, `max-w-3xl mx-auto`. Section `py-20`.
**BG:** `bg-gradient-to-b from-transparent via-violet-500/5 to-transparent`
**Schema:** FAQPage JSON-LD required.
**State:** `const [openIndex, setOpenIndex] = useState<number | null>(null)`
**Animation:** Each item `initial={{ opacity:0, y:10 }} whileInView={{ opacity:1, y:0 }} viewport={{ once:true }} transition={{ delay: i * 0.05 }}`

**Header:** H2: "Frequently Asked" + gradient span "Questions"

Each FAQ item: `bg-white/5 backdrop-blur-sm rounded-xl border border-white/10 overflow-hidden`
Button: `w-full flex items-center justify-between p-5 text-left hover:bg-white/5`
Chevron: `FaChevronDown text-violet-400` with `rotate-180` when open
Answer: `px-5 pb-5 text-gray-400 text-sm leading-relaxed`

**10 FAQ entries:**

1. **"How does Singoa handle subscription billing AR differently from traditional invoicing?"** -> (SaaS billing automation, subscription AR management)
   Answer: Subscription billing AR requires tracking recurring charges, failed payment retries, plan upgrades/downgrades, and prorations — all of which change monthly. Singoa maps every subscription event to your AR ledger automatically, so your team never manually reconciles billing platform data against your accounting system. It handles both B2B invoice-based and B2C card-based subscriptions.

2. **"How does automated dunning management work in Singoa?"** -> (dunning management software, automated dunning)
   Answer: Singoa's dunning engine retries failed charges at ML-optimized intervals based on card type, bank patterns, and customer payment history. Smart dunning recovers 50-70% of failed payments [Recurly/Churnkey]. It also sends personalized recovery emails, updates payment methods via secure links, and can pause or cancel subscriptions based on your configured rules — all without manual intervention.

3. **"How much revenue do SaaS companies lose to failed payments?"** -> (SaaS revenue leakage, failed payment cost)
   Answer: Payment failures cost approximately 9% of annual revenue without active recovery [Baremetrics]. For a $10M ARR company, that is roughly $900K/year. 20-40% of total SaaS churn is involuntary — customers who wanted to stay but lost access due to a failed payment [ProfitWell/Paddle, Recurly]. Smart dunning and pre-dunning alerts can recover the majority of this lost revenue.

4. **"Does Singoa support usage-based and hybrid billing reconciliation?"** -> (usage-based billing software, consumption billing AR)
   Answer: Yes. Singoa ingests usage data from your metering system and matches it against billing records automatically. Overages, credits, and mid-cycle plan changes are reconciled without manual spreadsheet work. Discrepancies are flagged for review before invoices go out. This works for pure usage-based, seat-based, and hybrid pricing models. 61% of SaaS companies now use some form of usage-based pricing [OpenView Partners].

5. **"Which billing platforms does Singoa integrate with?"** -> (Stripe billing integration, Chargebee integration)
   Answer: Singoa integrates natively with Stripe, Chargebee, Recurly, Zuora, Paddle, and Maxio (SaaSOptics). It also connects to QuickBooks, Xero, NetSuite, and Sage Intacct for accounting sync, plus Salesforce and HubSpot for CRM data. If you use a custom billing system, our API and webhook support can connect to any platform.

6. **"How does AR automation reduce involuntary churn?"** -> (reduce involuntary churn SaaS, churn reduction software)
   Answer: Up to 40% of SaaS churn is involuntary [ProfitWell/Paddle]. Singoa prevents this through three layers: (1) pre-dunning alerts notify customers before cards expire, (2) smart retries recover failed charges at optimal times before accounts are suspended, and (3) escalation workflows route high-value accounts to your team for personal outreach. The result is significantly lower involuntary churn and higher net revenue retention.

7. **"How is Singoa different from Stripe's built-in dunning?"** -> (Stripe dunning alternative, better than Stripe Smart Retries)
   Answer: Stripe's Smart Retries handle basic payment retries within Stripe. Singoa goes beyond: it works across all your billing platforms (not just Stripe), adds multi-channel outreach (email, SMS, in-app), provides AI-powered collection workflows for B2B invoices, handles payment matching and reconciliation, and gives your finance team a unified AR dashboard across all revenue streams. Companies using intelligent retry timing recover 15-25% more than fixed-schedule retries [Stripe Revenue Recovery].

8. **"What ROI can SaaS companies expect from AR automation?"** -> (SaaS AR automation ROI, dunning ROI)
   Answer: Based on industry benchmarks: 50-70% recovery of failed payments [Recurly], 20-30% DSO reduction [Tesorio, HighRadius], and significant reduction in manual AR time. For a $10M ARR company with 5% monthly payment failure rate, recovering even 60% of failed payments saves ~$300K annually. Most companies see full ROI within 2-3 months.

9. **"Can Singoa track NRR, GRR, and isolate involuntary churn?"** -> (NRR tracking software, SaaS metrics dashboard)
   Answer: Yes. Singoa provides MRR waterfall reporting (new, expansion, contraction, churn, recovered), NRR and GRR trend lines, and isolates involuntary churn from voluntary churn in all reports. This is critical for board reporting — top-quartile NRR (120%+) companies trade at 2-3x higher revenue multiples [Bessemer State of the Cloud 2024]. Your finance team gets the exact metrics investors and board members ask for.

10. **"How long does implementation take for SaaS companies?"** -> (SaaS AR automation implementation, quick setup)
    Answer: Most SaaS companies are fully onboarded in 1-2 weeks. Stripe and Chargebee integrations connect in minutes via OAuth. Historical payment failure data is analyzed within the first 48 hours to establish baseline recovery rates. No data migration required — Singoa reads from your existing billing platform in real-time. Dunning sequences can be configured and live within the first week.

### S9: Final CTA — Contact Form

**Layout:** Centered form, `max-w-2xl mx-auto`. Section `py-20`, `id="contact"`.
**BG:** `bg-gradient-to-b from-transparent via-violet-500/5 to-transparent`

**Header:**
- H2: "Stop Losing MRR to" + gradient span "Failed Payments" — `text-3xl md:text-4xl font-bold mb-4`
- Sub: "Get a free assessment of your failed payment rate, recovery potential, and projected revenue impact. No commitment required."

**Form** (`bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10 space-y-5`):
- Row 1 (2-col): Name* | Work Email*
- Row 2 (2-col): Company* | Role (placeholder: "e.g. VP Finance, Head of RevOps")
- Row 3: Current ARR Range (dropdown: Under $1M / $1M-$5M / $5M-$20M / $20M-$50M / $50M-$100M / $100M+)
- Row 4: Message (textarea, 4 rows, placeholder: "Tell us about your current AR challenges — failed payments, dunning, reconciliation...")
- Submit: "Get Your Free Recovery Assessment" — full-width gradient `from-violet-500 to-purple-500`
- `trackEvent('industry_form_submit', { industry: 'saas' })`
- POST to `https://app.singoa.com/api/core/contact/` with `source: 'saas-industry-page'`

**Below form** (`flex items-center justify-center gap-6 mt-8 text-sm text-gray-500`):
- Email: shivam@singoa.com (FaEnvelope icon)
- Phone: +1 (778) 885-9155 (FaPhone icon)
- Book a Call: cal.com link (FaCalendarAlt icon)
- SOC 2 badge: FaShieldAlt text-violet-400 + "SOC 2 Compliant"

**Success state:** Replace form with centered card — FaCheckCircle text-5xl text-violet-400 + "Thank You!" + "We'll be in touch within 24 hours with your custom recovery assessment."

---

## D) ABOVE-THE-FOLD CHECKLIST

| 2-Second Question | Answer on Page | Element Delivering It |
|---|---|---|
| What does this product do? | AI-powered failed payment recovery and dunning automation for SaaS | H1 subheadline + MRR waterfall dashboard mockup showing dunning pipeline |
| Who is it for? | SaaS finance/RevOps teams (VP Finance, Head of RevOps, CFO) | "SaaS Revenue Recovery" badge + MRR/dunning terminology + plan tiers in mockup |
| Why should I care? | 9% of MRR lost annually to payment failures; 20-40% of churn is involuntary | Pain stat callout below H1 + stat bar below hero |
| What should I do next? | See your recovery potential or book a demo | Two CTAs: primary gradient + secondary ghost |

**Trust without scrolling:** SOC 2 Type II / PCI DSS / Stripe & Chargebee Integration badges visible in hero trust row. Real SaaS terminology (MRR, dunning, smart retry, plan tiers Enterprise/Growth/Starter) and realistic dollar amounts in dashboard mockup prove domain expertise instantly.

**Mobile above-fold (no mockup):** Badge -> H1 -> Pain stat -> Subheadline -> 2 CTAs -> Trust badges -> Stat bar. All text-first. Mockup `hidden lg:block`.

---

## E) DIFFERENTIATION FROM OTHER 9 INDUSTRY PAGES

| Element | SaaS | How Others Differ |
|---|---|---|
| Hero mockup | MRR waterfall chart + dunning pipeline table with plan tiers, retry status, recovery counters | Healthcare: CARC-code denial table. Construction: AIA G702 pay app. Legal: trust accounting ledger. Manufacturing: 3-way PO match grid. |
| S3 layout | Red/green metric comparison (recovery rate focused) | Healthcare: workflow comparison (manual tasks vs AI). Construction: timeline slider. Legal: compliance checklist. |
| S4 format | 4-tab explorer with recovery funnel, dunning swimlane, churn line chart, NRR gauge | Healthcare: tabs with CARC claims, ERA matching, AR aging, patient collections. Construction: visual pay app walkthrough. Legal: trust ledger demo. |
| S5 ROI | 3-input interactive calculator (ARR, fail rate, current recovery) showing delta | Healthcare: static assumptions (claims, denial rate, rework cost). Construction: DSO savings. Others: simpler calculators. |
| S6 integrations | Billing-platform-first (Stripe/Chargebee/Recurly) + flow diagram showing Singoa as AR layer | Healthcare: EHR-first (Epic/Cerner). Construction: Sage/Procore. Legal: Clio/PracticePanther. |
| S7 trust | Lighter security section (SOC 2 + PCI DSS + encryption) | Healthcare: full standalone HIPAA/BAA compliance section. Other industries: badges only. |
| Terminology | MRR, ARR, NRR, GRR, dunning, involuntary churn, ARPU, LTV, smart retry, expansion revenue | Healthcare: CARC, RARC, ERA, CPT, ICD-10. Construction: AIA G702, retainage. Legal: LEDES, IOLTA. |
| CTA language | "See Your Recovery Potential", "Get Your Custom Recovery Report" | Healthcare: "Denial Recovery Potential". Construction: "DSO Savings Calculator". Legal: "Billing Realization Audit". |
| Color accent | Violet #8B5CF6 / Purple #A855F7 | Healthcare: Pink/Rose. Construction: Amber/Orange. Legal: Slate/Gold. Education: Blue. |
| Unique visual | Dunning timeline swimlane (Tab 2) + NRR semicircle gauge (Tab 4) | No other industry has these specific visualization types. |

---

## F) CTA STRATEGY — Industry-Specific CTAs

| Section | CTA Text | Type | Action | Analytics Event |
|---|---|---|---|---|
| Hero primary | "See Your Recovery Potential" | Gradient button (violet->purple) | Smooth scroll to #roi | `cta_type: 'hero_roi'` |
| Hero secondary | "Book a 15-Min Demo" | Ghost button (border-violet-500/30) | Smooth scroll to #contact | `cta_type: 'hero_demo'` |
| Product Tabs (each) | "Learn more about [feature] ->" | Violet text link | Scroll to contact or feature page | `cta_type: 'tab_learn_more'` |
| ROI Calculator | "Get Your Custom Recovery Report" | Gradient button + FaArrowRight | Smooth scroll to #contact | `cta_type: 'roi_calculator'` |
| Integrations footer | "Request an integration" | Violet underlined text link | Smooth scroll to #contact | `cta_type: 'integration_request'` |
| Trust section | (No CTA — trust section, not sales) | — | — | — |
| Final form submit | "Get Your Free Recovery Assessment" | Full-width gradient button | Form POST | `cta_type: 'form_submit'` |

All CTAs fire: `trackEvent('industry_cta_click', { industry: 'saas', cta_type: '...' })`

**CTA design rules:**
- Primary: `bg-gradient-to-r from-violet-500 to-purple-500 rounded-lg font-semibold hover:shadow-lg hover:shadow-violet-500/25 transition-all`
- Secondary/Ghost: `border border-violet-500/30 rounded-lg font-semibold hover:bg-violet-500/10 transition-all`
- Text links: `text-violet-400 hover:text-violet-300 text-sm`
- All buttons: `px-8 py-4` (hero), `px-6 py-3` (inline)

---

## G) COLOR SCHEME — Dark/Light Section Rhythm

**Palette:**
- Primary accent: #8B5CF6 (violet-500)
- Secondary accent: #A855F7 (purple-500)
- Page background: #0B0F1A
- Mockup/card background: #0D1321
- Card surface: `white/5` (rgba 255,255,255,0.05)
- Card border: `white/10`
- Card hover border: `violet-500/30`
- Text primary: white
- Text secondary: gray-300
- Text tertiary: gray-400
- Text muted: gray-500
- Status green: green-400 (#4ADE80) — recovered, success
- Status yellow: yellow-400 (#FACC15) — at risk, pending
- Status red: red-400 (#F87171) — failed, churned, final notice
- Status blue: blue-400 (#60A5FA) — dunning sent, in progress
- Status violet: violet-400 (#A78BFA) — Singoa recovered (brand attribution)
- Emerald: emerald-400 (#34D399) — new MRR, NRR improvement

**Section rhythm (visual weight alternation):**

| # | Section | BG Overlay | Visual Weight | Notes |
|---|---|---|---|---|
| S1 | Hero | `gradient violet/8->purple/4` | HEAVY | Gradient + MRR waterfall mockup + stat bar |
| S2 | Problem | none | MEDIUM | Clean dark, 2x2 cards provide structure |
| S3 | Before/After | none (within S2) | MEDIUM | Red/green panels add color without overlay |
| S4 | Product Tabs | `via-violet-500/5` | HEAVY | Gradient + tab UI + mini-mockups per tab |
| S5 | ROI | `via-violet-500/5` | HEAVY | Gradient + metric cards + interactive calculator |
| S6 | Integrations | none | LIGHT | Clean dark, pill badges + flow diagram |
| S7 | Trust | `via-violet-500/3` | LIGHT | Subtle gradient, security-focused |
| S8 | FAQ | `via-violet-500/5` | LIGHT | Accordion, minimal visual weight |
| S9 | Contact | `via-violet-500/5` | MEDIUM | Form + gradient submit button |

Pattern: HEAVY -> MEDIUM -> MEDIUM -> HEAVY -> HEAVY -> LIGHT -> LIGHT -> LIGHT -> MEDIUM
Two heavy sections back-to-back (S4/S5) is intentional — the product showcase and ROI calculator are the conversion core of the page. Light sections after provide breathing room before the final CTA.

---

## IMPLEMENTATION NOTES

1. ALL statistics sourced from research-saas.md — zero fabricated data
2. No fake logos, testimonials, or case studies (Singoa is new)
3. 4-tab product explorer (S4) with SaaS-specific mini-mockups is the primary differentiating pattern
4. MRR waterfall chart uses SVG `<rect>` elements — no charting library needed
5. NRR gauge (Tab 4) uses SVG semicircle with animated needle — SaaS-exclusive visualization
6. Dunning swimlane timeline (Tab 2) is SaaS-exclusive — no other industry page has this
7. Interactive ROI calculator (S5) has 3 inputs and shows delta recovery — more sophisticated than other pages
8. Integration flow diagram (S6) showing Singoa as "AR layer between billing and accounting" is SaaS-exclusive
9. All Framer Motion animations use `viewport={{ once: true }}` (no re-triggering on scroll back)
10. Dashboard mockup `hidden lg:block` — mobile gets text-first hero
11. FAQPage JSON-LD schema required for SEO (10 questions)
12. Service, BreadcrumbList, WebPage JSON-LD schemas maintained
13. Form POSTs to `https://app.singoa.com/api/core/contact/` with `source: 'saas-industry-page'`
14. All CTAs fire `trackEvent()` from `@/utils/analytics`
15. Heading hierarchy: single H1 in hero, H2 per section, H3 for subsections
16. Accessibility: `aria-hidden="true"` on decorative icons, `aria-expanded` on FAQ buttons, `aria-label` on CTAs, no `<a><button>` nesting
17. Meta: title <60 chars, description 150-160 chars, canonical URL, OG tags, Twitter card
18. Tab component uses `AnimatePresence mode="wait"` for clean enter/exit transitions
19. Sidebar nav in hero mockup is decorative only — no click handlers needed
20. SaaS-specific terminology used throughout: MRR, ARR, NRR, GRR, dunning, involuntary churn, ARPU, LTV, smart retry, expansion revenue, contraction, plan tiers