# Development Brief: digital-dispatcher Landing Page

Build a high-performance, responsive B2B SaaS landing page for 'digital-dispatcher' using React, Vite, Tailwind CSS, and shadcn/ui components.

## Design Tokens (CSS Custom Properties)
Map the following values to your Tailwind configuration or global CSS:
- --color-primary: #1B2A4E (Main headers/authority)
- --color-primary-hover: #14203D
- --color-secondary: #4A6FA5
- --color-accent: #FF6B35 (CTA and alerts)
- --color-background: #F8FAFC
- --color-surface: #FFFFFF
- --color-text: #0F172A
- --color-text-muted: #64748B
- --color-border: #E2E8F0
- --color-success: #10B981

## Typography & Accessibility
- Style: Sans-serif, structured, and functional.
- Weight: Medium-to-bold emphasis on headings.
- Scale: Disciplined hierarchy with large bold headlines and generous line-height for body copy.
- Constraints: Maintain high contrast (7:1+) for text. Use safety orange (#FF6B35) for focal points only.

## Section 1: Hero
- Layout: Full-viewport, split-screen. Product mockup/visual on the right.
- Background: `--color-primary`.
- H1 Typewriter Animation:
  - static_prefix: "One Dispatcher Instead of "
  - rotating_words: ["Five.", "a Team.", "Five Experts."]
  - static_suffix: " Fast. Without Loss of Quality."
  - Animation Logic: Type character by character (80ms/char), pause (1800ms), delete character by character (50ms/char). Blinking cursor (|) at 530ms interval during typing/deleting, hidden during pause.
- Subheadline: "Digitize the entire dispatcher role—from perceiving signals to making decisions. Our AI platform extracts expertise from your team’s history and screen actions to scale logistics without linear hiring."
- CTAs: Primary "Book a Demo" (Accent style) and Secondary "Request Operational Audit".

## Section 2: Problem
- Layout: Responsive grid of 4 cards.
- Feature: Stat values animate counting up from 0 to 100 on scroll (representing efficiency gap).
- Content:
  1. "Critical decision-making logic is locked in dispatchers' heads, making your business fragile and non-standardized."
  2. "Scaling is blocked by months of expensive onboarding as new hires learn through costly trial and error."
  3. "Up to 80% of resources are consumed by repetitive, routine scenarios instead of high-value expert decisions."
  4. "Standard automation and rigid bots lack context, frustrating drivers and forcing manual human intervention anyway."

## Section 3: Solution
- Intro Paragraph: "Digital Dispatcher is an AI-agent platform purpose-built for logistics. We digitize the role entirely: perceiving signals, interpreting context, taking action, and handling escalations. By analyzing screen recordings and chats, we turn your team's unstructured experience into a scalable digital asset. Choose between 'Augmented' mode (AI prepares solutions for human approval) or 'Autonomous' mode (AI acts independently with automated escalation for anomalies)."
- Alternating Rows (Visual Left/Right):
  - Row 1 (Before): "Your business growth is capped by the slow, expensive process of hiring dispatchers whose expertise stays siloed in their heads."
  - Row 2 (After): "Your expertise is institutionalized. Digital agents handle 80% of routine operations, allowing one dispatcher to manage the workload of five with total transparency."

## Section 4: How it Works
- Layout: Numbered steps with connecting sequence flow.
- Content:
  1. Audit & Extraction: The platform analyzes chat history, call logs, and screen recordings to map the real decision-making patterns of your team.
  2. Scenario Formalization: Patterns are deconstructed into reactive (incoming requests) and proactive (trigger-based) scenarios validated by your experts.
  3. Deployment: AI-agents connect to your communication channels and TMS, handling context-aware decisions or preparing detailed escalations for humans.
  4. Scaling: Use a unified configuration model to manage multiple clients and SLAs without custom development for each new project.

## Section 5: Benefits
- Layout: 6-card grid with icons.
- Background: Distinct from Solution section.
- Content:
  - Independence from Turnover: Knowledge is digitized and owned by the company.
  - Standardized Decision Quality: Every dispatcher works according to the same high-quality, digitized scenarios.
  - Context-Aware Communication: Our AI reads chat history. It won't ask a driver a question they've already answered.
  - Rapid Onboarding: Slashing time-to-productivity from months to days.
  - Anomaly Detection: Automatically identify complex risks like 'teleportation' or proactive SLA violations.
  - Scaling Without Headcount: Increase delivery volume without linear increase in staff.

## Section 6: Trial CTA
- Layout: Centered container, accent-colored background.
- Headline: "Start Your Operational Transformation Today"
- Subheadline: "Experience the power of AI-driven dispatching with a free trial for up to 30 days."
- Button: "Get a Free Trial" (Large, high-contrast).

## Section 7: For Whom
- Layout: 4 distinct scannable cards.
- Content:
  - Courier & Last-Mile Delivery: Prevent driver friction caused by context-blind bots.
  - Freight & 3PL Operators: Standardize complex logic across multiple shifts and dozen clients.
  - Passenger Transport & Taxi: Handle peak volumes of assignments and cancellations autonomously.
  - Warehouse Coordination: Eliminate coordination gaps by monitoring shipment readiness.

## Section 8: Differentiators
- Layout: Semantic HTML Table.
- Rows:
  - Knowledge Capture: [Us: Extracts logic from recordings/chats] vs [Them: Manual rule-setting]
  - Context Awareness: [Us: Understands conversation history] vs [Them: Rigid timers and triggers]
  - Logistics Domain: [Us: Built for anomalies like 'teleportation'] vs [Them: Generalist RPA tools]
  - Scalability: [Us: Unified model for multiple clients] vs [Them: Requires custom code for every project]
- Highlight: Visual emphasis on the "Us" column.

## Section 9: FAQ
- Layout: shadcn/ui Accordion.
- Items:
  - "What is the difference between an AI agent and a chatbot?"
  - "How do screen recordings help the AI?"
  - "Can we control when the AI acts autonomously?"
  - "How long does a typical implementation take?"
  - "Do we need a technical team to integrate this?"

## Section 10: Final CTA & Footer
- Layout: Full-width dark section.
- Form: Inline lead form (Name, Company, Work Email) with console.log submission.
- Footer: Meta title "Digital Dispatcher | AI-Platform to Scale Logistics Operations" as brand label. Meta description "One dispatcher instead of five. Digitize your team's expertise..." as tagline.

## Navigation & Interactivity
- Sticky Bar: Appears after Hero. Left: "Digital Dispatcher". Right: "Scale Your Dispatch" (Accent button).
- Exit Intent Modal: Desktop trigger (mouseleave). Text: "Don't let your operational expertise walk out the door. Start digitizing your dispatcher roles today." Primary CTA button included.

Deliverable: One scrollable, production-ready landing page.