## SINGOA INDUSTRY LANDING PAGES — WORLD-CLASS REDESIGN ### MISSION Redesign all 10 industry landing pages at singoa-landing/pages/industries/ to be world-class, conversion-optimized landing pages. Each page must feel like it was built by a specialist team: a $100M+ ad-spend landing page designer, an industry AR specialist, a conversion rate optimizer, and a visual designer. Each page must feel SPECIFICALLY built for that industry's decision-maker. A healthcare CFO should think "these people understand revenue cycle." A construction controller should see AIA pay app flows, not generic dashboards. A law firm partner should see trust accounting and LEDES billing, not the same template in a different color. Singoa is an AI-powered AR automation tool that reduces AR processing time by 80-90%. It empowers AR teams, not replaces them. ### WHAT WENT WRONG LAST TIME (DO NOT REPEAT) - All 10 pages used the SAME template with different accent colors — UNACCEPTABLE - Research was done but never used to reshape page design or content - No unique visual mockups — every page had the same generic section layout - No buyer persona thinking — all decision-makers saw the same page structure - Steps were rushed and marked complete without genuine quality checks - No competitor visual research — never looked at how Tesorio, HighRadius, etc. present pages - No above-the-fold conversion thinking from an ad-click perspective - Made-up statistics everywhere instead of real sourced data - "Get Started Free" on every page instead of industry-specific CTAs ### VISUAL DESIGN PRINCIPLES (from competitor research) Based on analysis of Odoo, HighRadius, Tesorio, Billtrust, Versapay, and Upflow: 1. SHOW THE PRODUCT (Odoo's approach — the clear winner): - Odoo is the only site that shows real product UI on every page. This is the most effective approach. - AR buyers are finance professionals who want to SEE the tool, not read about it. - Singoa should show realistic high-fidelity mockups of dashboards, invoice views, collection workflows. - Frame them in browser/device mockups. This is the single highest-impact visual element. 2. TABBED PRODUCT EXPLORATION (Versapay's approach): - Let visitors explore different modules without leaving the page. - Each tab swaps in a relevant product mockup with a one-line benefit. - Far more engaging than a static page scroll. 3. OUTCOME METRICS ABOVE THE FOLD (Tesorio + HighRadius): - Lead with hard numbers: "33 days DSO reduction," "$13M recovered," "3x productivity." - Creates immediate credibility and answers "why should I care?" before scrolling. - Use real industry benchmarks, not made-up numbers. 4. INTERACTIVE DEMO CTA (Versapay + Upflow): - "Try Interactive Demo" or "Take a Product Tour" alongside "Book a Demo." - Bridges the gap between "show me" and "let me try." 5. SCROLL-TRIGGERED ANIMATIONS (Versapay + Upflow): - Subtle animations on product visuals as users scroll — fade-in, counters, progress bars. - Makes the product feel alive without being distracting. - Use Framer Motion or CSS transitions, not heavy libraries. WHAT TO AVOID: - 4/6 competitors fail to show actual product UI — they hide behind icons and stock photos. Don't do this. - Generic illustrations that could describe any SaaS product. - Stock photography of "professionals looking at screens." - Abstract icon grids that don't demonstrate the product. ### HOW TO BUILD VISUAL MOCKUPS (technical approach) All mockups are PURE REACT COMPONENTS — no images, no Figma, no external tools needed. TECH STACK (already installed): - Tailwind CSS: style everything to look like a real dashboard (borders, shadows, rounded corners, grids, dark theme) - Framer Motion: animate rows appearing, counters counting up, status badges pulsing, progress bars filling - SVG inline: simple charts (bar charts, pie charts, sparklines) as SVG / elements - CSS gradients: heatmaps, progress indicators, status colors - React hooks: useRef, useState, useEffect, useInView (from framer-motion) MOCKUP ANATOMY (every mockup follows this pattern): ```
{/* Browser chrome — makes it look like a screenshot */}
Singoa — [Industry] Dashboard
{/* Dashboard content */}
{/* Metric cards with animated counters */} {/* Data table rows that animate in one by one */} {/* Status badges with pulsing animations */} {/* Simple SVG charts */}
``` ANIMATION PATTERNS: 1. Animated counters: useInView + requestAnimationFrame to count from 0 to target 2. Staggered row entry: motion.div with delay: 0.8 + i * 0.15 for each row 3. Pulsing status: animate={{ opacity: [1, 0.4, 1] }} transition={{ duration: 1.5, repeat: Infinity }} 4. Progress bars: motion.div with initial={{ width: 0 }} animate={{ width: '75%' }} 5. Fade-in sections: initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} WHAT MAKES EACH MOCKUP UNIQUE: - Healthcare: Claim denial table with CARC codes, payer names, appeal status, $ amounts - Construction: AIA G702 pay app with Schedule of Values line items, retainage column, % complete - SaaS: Subscription table with MRR, churn risk, dunning status, retry countdown - Manufacturing: PO-to-invoice matching grid with match %, deduction flags, auto-reconciled badge - Professional Services: Timesheet-to-invoice pipeline with WIP amounts, realization %, billing status - Education: Student payment plan grid with tuition balance, installment schedule, payment status - Transportation: Freight invoice table with load #, carrier, BOL, matched/unmatched status - Wholesale: Order-to-cash flow with EDI 850 orders, pick/ship status, invoice generated badge - Oil & Gas: JIB processing table with well name, working interest %, net revenue, distribution status - Legal: Trust account ledger with matter #, client, trust balance, LEDES invoice status, compliance flag Each mockup uses REAL industry terminology, realistic data values, and domain-specific column headers. The data should look like what the buyer sees in their actual workflow every day. ### REAL SINGOA FEATURES (reference for mockups) The features listed below are what's ALREADY BUILT in the Singoa MVP. Use them as a reference and starting point for mockups — but DO NOT limit designs to only these features. IMPORTANT: Singoa is a flexible AR automation platform that can be tailored to ANY industry's specific needs. If an industry demands a feature that doesn't exist yet (e.g., a healthcare claim denial tracker, a legal trust accounting module, a freight factoring calculator), DESIGN IT ANYWAY. The mockups and page designs should show what the buyer NEEDS to see, not just what's currently built. New features, workflows, and visual concepts can be created as needed for each industry. The existing features below are here to give you ideas and show what's already available — but you are fully open to propose new features, new mockup designs, and new visual approaches that would resonate best with each industry's buyer persona. Here's the current feature inventory: CORE PLATFORM (all industries): - Invoice Management: full lifecycle (draft → unpaid → overdue → paid), templates, bulk creation - Invoice Generation Engine: manual, ERP sync, PO upload, bulk CSV import, AI line item suggestions - Customer Management: fuzzy deduplication, merge logic, multi-source tracking (QBO, Xero, Salesforce, HubSpot) - Payment Matcher: fuzzy-matches payments to invoices (amount, reference, date proximity), handles partial/over/under payments - Payment Detective AI: scans Plaid bank, QBO/Xero, Gmail/Outlook, CRM to find and match payments - Bank Statement Parser: extracts transactions from uploaded statements - Payment Audit Trail: immutable audit log of all matching decisions - Collection Psychologist AI: segments customers (VIP/STANDARD/RISK/DELINQUENT), creates personalized collection strategies and tone - Credit Intelligence: AI credit scoring (0-100, A+ through F), payment reliability trends, predictive behavior - Risk Engine: portfolio-level risk scores (overdue ratio, avg days overdue, unmatched count) - AR Strategy Planner (AI Brain): post-sync analysis, prioritized action plans, routes uncertain decisions to humans - AI Agent: conversational assistant (Gemini + Claude fallback), function calling, confirmation workflow - Automation Rules Engine: trigger-based rules (overdue, high risk, new invoice, payment received, approaching due) - Natural Language Rule Engine: parses plain English into automation rules, simulates against historical data - AI Authorization & Approval Workflow: auto-approval thresholds, multi-channel notifications (web, email, SMS) - Learning Service: learns from approval/rejection patterns, generates improvement suggestions - A/B Testing for Communications: experiments for email tone, reminder timing, statistical significance - Communications Hub: unified inbox (Gmail, Outlook, Slack, CRM, webhooks), auto-classification, auto-response - Email Intelligence: classifies inbound emails, extracts payment intent, resolves AR threads - Integrations: OAuth to QuickBooks, Xero, NetSuite, Plaid, Gmail, Outlook, Slack - Smart Import Wizard: multi-step CSV import with column mapping, transformations, profiles - Reports Suite: 7 built-in reports (AR Overview, Aging, Cash Flow Forecast, Bad Debt, Collection Performance, Customer Behavior, Singoa ROI) - AI Report Builder: natural language + drag-and-drop, entity/field selection, visualizations, drill-down, save/share/export - Daily Digest: AI-generated daily AR summary - Dashboard: real-time metrics, activity feed, AI chat, collections chart, automation suggestions - Notification System: multi-channel preferences (web, email, SMS), quiet hours CONSTRUCTION VERTICAL: - AIA G702/G703 Payment Applications: auto-generates from Schedule of Values, retainage tracking, change orders - Project Management: full lifecycle (bidding → awarded → in_progress → substantial_completion → final_completion → closed) - Retainage Manager: tracks retainage per project, partial release at substantial completion, final release - Lien Waiver Generator: conditional and unconditional waivers for subs and suppliers - Construction Billing: general billing management OIL & GAS VERTICAL: - Joint Interest Billing (JIB): distributes costs among JV partners by working interest %, COPAS overhead calculation - AFE Tracker: tracks Authorization for Expenditure from draft through approval to completion - Joint Venture Management: partner ownership %, well identification (API/UWI numbers) - Oil & Gas Billing: general billing management EDUCATION VERTICAL: - Student Payment Plans: installment-based tuition plans, setup fees, late fees, grace periods, auto-charge - Academic Term Billing: tied to terms (Fall/Spring/Summer/Winter), bulk semester bill generation - Student Account Management: charges, payments, balances, account statements - Registration Hold Manager: places/releases holds based on outstanding balances - Financial Aid Applicator: applies credits and adjustments - Tax Form Generation: US 1098-T and Canadian T2202 - SIS Integrations: Ellucian Banner, Colleague, PowerCampus, PeopleSoft, Jenzabar, TouchNet - Education Reports: 6 template parts covering billing, collections, financial aid USE THESE EXISTING FEATURES as a starting point, but also DESIGN NEW features and mockups tailored to each industry's needs. The goal is to show what resonates most with each buyer persona — whether it's an existing feature or a new concept. Examples: - Healthcare mockup: show Collection Psychologist segmenting patients, Payment Detective finding insurance payments — OR design a claim denial dashboard, payer reimbursement tracker, HIPAA-compliant payment portal, or any visual that a healthcare CFO would instantly recognize - Construction mockup: show G702/G703 generation, Retainage Manager — OR design a project cash flow timeline, subcontractor payment waterfall, change order impact visualizer - SaaS mockup: show Payment Matcher recovering failed subscriptions — OR design a churn recovery dashboard, MRR impact calculator, dunning sequence builder - Manufacturing mockup: show Payment Detective matching POs — OR design a 3-way match visualizer, deduction management dashboard, supplier payment scorecard - Education mockup: show Student Payment Plans, Registration Hold Manager — OR design a tuition revenue forecaster, financial aid reconciliation view, enrollment-to-billing pipeline - Oil & Gas mockup: show JIB processing, AFE Tracker — OR design a revenue distribution waterfall, well-level AR aging, joint venture settlement dashboard - Legal mockup: show Trust Accounting, LEDES billing — OR design a matter profitability dashboard, trust compliance monitor, billing realization tracker - Transportation mockup: show Payment Matcher for freight invoices — OR design a factoring cost comparison tool, carrier payment timeline, load-to-cash tracker - Wholesale mockup: show high-volume Invoice Management — OR design an EDI order-to-payment flow, distributor credit dashboard, seasonal AR forecaster - Professional Services mockup: show time-based Invoice Generation — OR design a WIP-to-billed pipeline, utilization-to-revenue visualizer, retainer burn-down chart The key principle: design what would make each industry's decision-maker say "these people understand my business" — don't limit yourself to what already exists. ### AGENT COORDINATION MODEL The MAIN AGENT acts as a project coordinator. It does NOT do research or audits itself. Instead, it: 1. Reads the tracker to find the next pending industry 2. Launches specialized subagents for each step 3. Waits for results, reviews quality, and decides if work meets the bar 4. Only moves to the next step when the current step genuinely passes quality review 5. Never marks a step complete unless the output would impress a real landing page designer SUBAGENT ROSTER: - RESEARCH AGENT (general-purpose, opus): Deep industry research, competitor analysis, buyer persona development - SEO AUDIT AGENTS (seo-technical, seo-content, seo-schema, sonnet): Technical SEO, content quality, schema markup - DESIGN AGENT (general-purpose, opus): Visual design planning, component architecture, mockup specifications - EXECUTION AGENT (general-purpose, opus): Code implementation based on approved design specs - ADS STRATEGY AGENT (general-purpose, opus): Paid ads planning, keyword research, budget allocation - VISUAL QA AGENT (main agent via Chrome MCP): Screenshot testing, responsive checks, visual polish ### STATE TRACKING First thing every iteration: read _extras/data/industry-seo-tracker.json - If ALL 10 are 'completed', output ALL 10 INDUSTRY LANDING PAGES AD-READY - Find the next industry with status != 'completed' - Process ONE industry fully through all steps before moving to the next ### PHASE 1-7: PER-INDUSTRY PROCESSING #### STEP 1: DEEP RESEARCH + BUYER PERSONA (subagent: general-purpose, opus) Launch a research subagent that does ALL of the following: A) INDUSTRY AR RESEARCH: - SEO keywords with volumes/CPC (primary + long-tail) - Real data-backed AR pain points with sourced statistics - DSO benchmarks, collection rates, write-off %, cost of manual AR - Software landscape (what ERP/billing/accounting tools this industry uses) - Market size and growth trends B) COMPETITOR VISUAL RESEARCH: - How do AR automation competitors present their product for THIS industry? - What visual patterns work? (dashboard mockups, workflow animations, ROI calculators) - What CTAs do they use? What's above the fold? - Specific competitors to research per industry (e.g., Waystar/AKASA for healthcare, Siteline/GCPay for construction) C) BUYER PERSONA DEVELOPMENT: - WHO is the decision-maker? (title, daily responsibilities, what keeps them up at night) - What language do they use? (industry jargon, acronyms, terminology) - What do they search for when looking for solutions? - What objections do they have? What builds trust? - What's their buying process? (demo → pilot → rollout vs self-serve) D) UNIQUE PAGE CONCEPT: - Based on all research, propose a UNIQUE page concept for this industry - What visual mockup should the hero show? (specific to this industry's workflow) - What's the #1 stat that will stop them scrolling? - What's the before/after comparison that resonates most? - What ROI framing works best? (time saved, money recovered, DSO reduced, etc.) Save findings to _extras/docs/references/research-[industry].md Update tracker: set research: true #### STEP 2: SEO AUDIT (3 parallel subagents: seo-technical, seo-content, seo-schema, sonnet) Audit the CURRENT page state. Compare against Step 1 research. Identify gaps. - seo-technical: meta tags, canonical, heading hierarchy, OG tags, accessibility - seo-content: E-E-A-T signals, content depth, keyword targeting, thin content - seo-schema: JSON-LD completeness (FAQPage, Service, BreadcrumbList, WebPage) Update tracker: set audit: true #### STEP 3: DESIGN SPECIFICATION (subagent: general-purpose, opus) This is the CRITICAL step that was missing before. Create a detailed design spec that makes this page UNIQUE. The design agent receives: research findings + audit results + buyer persona + the VISUAL DESIGN PRINCIPLES section above. It produces a design spec covering: A) PAGE CONCEPT & BUYER JOURNEY: - What is this buyer's mental state when they land? (frustrated with denials? drowning in pay apps? losing MRR to churn?) - What do they need to see FIRST to stay on the page? (product solving their problem, not a generic headline) - What's the emotional arc of the page? (pain → recognition → solution → proof → action) - What sections does THIS page need, and in what order? (NO fixed template — the buyer journey determines structure) B) UNIQUE HERO VISUAL MOCKUP: - Each industry gets a DIFFERENT hero visual. NOT just text + stats + CTA. - Healthcare: Animated claim denial dashboard showing denials being caught in real-time - Construction: AIA G702/G703 pay app being auto-generated with line items filling in - SaaS: Subscription dashboard showing failed payments being recovered with dunning sequences - Manufacturing: High-volume invoice matching animation with PO-to-payment flow - Professional Services: Time-to-invoice pipeline showing WIP converting to billed revenue - Education: Tuition billing dashboard with payment plan enrollment flowing in - Transportation: Freight invoice matching with carrier payments being reconciled - Wholesale: Order-to-cash flow showing EDI orders converting to matched payments - Oil & Gas: JIB processing dashboard with revenue distribution waterfall - Legal: Trust accounting ledger with LEDES billing and matter-based AR aging - Each mockup is a React component using Tailwind + Framer Motion (no images needed) - Must look like a real product screenshot, not a generic illustration B) SECTION-BY-SECTION LAYOUT PLAN: - For each section (Hero, Problem, Solution, HowItWorks, ROI, Integrations, FAQ, Contact): - What layout to use (2-col, 3-col, timeline, tabs, accordion, split-screen, etc.) - What visual elements to include (mockups, animations, icons, charts) - How this section differs from the same section on other industry pages - Specific copy direction (headline, subhead, body tone) C) ABOVE-THE-FOLD CONVERSION CHECKLIST: - Within 2 seconds of landing, the visitor must understand: 1. What this product does (AR automation) 2. Who it's for (this specific industry role) 3. Why they should care (their #1 pain point, quantified) 4. What to do next (clear CTA) - The hero visual must SHOW the product solving their problem - Trust signals must be visible without scrolling D) DIFFERENTIATION FROM OTHER PAGES: - Explicitly state what makes this page's design different from the other 9 - Different layout patterns, different visual approaches, different content structure - At minimum: different hero mockup, different problem section layout, different ROI visualization Save design spec to _extras/docs/references/design-[industry].md Update tracker: set plan: true, visuals_planned: true #### STEP 4: EXECUTE THE DESIGN (subagent or main agent) Implement the design spec from Step 3. This is a FULL REWRITE, not a patch job. CRITICAL: There is NO fixed section template. Each page's structure, sections, order, and content blocks are determined entirely by the Step 3 design spec, which is driven by buyer persona research. A healthcare page might need a compliance-heavy trust section above the fold. A construction page might need a visual pay app flow before any text. A legal page might lead with trust accounting compliance. A SaaS page might need an interactive churn calculator as the hero. The design agent in Step 3 decides: - WHICH sections this page needs (not every page needs the same sections) - WHAT ORDER they appear in (based on what this buyer cares about most) - HOW MANY sections (some pages might need 6, others 10) - WHAT LAYOUT each section uses (no two pages should use the same layout for the same concept) - WHETHER to include an ROI calculator, a before/after comparison, a workflow animation, a tabbed product explorer, or something else entirely The only REQUIRED elements across all pages are: - SEO: meta title (<60 chars), description (150-160 chars), JSON-LD (Service + FAQPage), canonical URL, OG tags, Twitter card - Accessibility: aria-hidden on decorative elements, no