True Service

# System Instruction: Build "True Service" Premium CRM Landing Page

You are an elite principal UI/UX designer and staff frontend engineer. Your objective is to build a complete, production-ready, highly interactive landing page for **True Service**—an autonomous, full-lifecycle CRM platform engineered to unify sales pipelines, AI customer operations, field service orchestration, predictive analytics, and automated retention.

Build the entire application cleanly in React, styled with Tailwind CSS, orchestrated with Framer Motion, and decorated with `lucide-react` icons and curated high-resolution Unsplash imagery.

---

## 1. Core Technology Stack & Dependencies

- **Framework**: React 18+ (Vite or Next.js App Router compatible, client components where interactive).
- **Styling**: Tailwind CSS 3.4+ using JIT mode.
- **Motion & Transitions**: `framer-motion` (utilize `AnimatePresence`, `motion.div`, `useScroll`, `useTransform`, and spring dynamics).
- **Iconography**: `lucide-react` (clean, uniform 1.5px to 2px stroke width).
- **Visual Assets**: Unsplash CDN with parameters (`auto=format&fit=crop&q=80`).

---

## 2. Design System & Aesthetics

### Color Palette (Dark Mode Base with Prismatic Accents)
- **Canvas / Background**:
  - Base: `#05070B` (`bg-[#05070B]`)
  - Elevated Surface / Cards: `#0D1117` (`bg-[#0D1117]`)
  - Interactive Surfaces: `#161B22` (`bg-[#161B22]`)
  - Subtle Borders: `border-white/[0.08]` and `border-white/[0.15]`
- **Primary / Brand Identity**:
  - Electric Indigo: `#4F46E5` (`bg-indigo-600`, `text-indigo-400`)
  - Violet Bloom: `#7C3AED` (`bg-violet-600`)
  - Cyan Pulse: `#06B6D4` (`text-cyan-400`, `bg-cyan-500`)
- **Status & Semantics**:
  - Success / Conversion: `#10B981` (`emerald-500`)
  - Attention / Alert: `#F59E0B` (`amber-500`)
- **Typography & Neutral Hierarchy**:
  - Headings & High Contrast Text: `#F9FAFB` (`text-neutral-50`)
  - Secondary / Body: `#94A3B8` (`text-slate-400`)
  - Muted / Meta: `#64748B` (`text-slate-500`)

### Typography & Layout Rules
- **Font Stack**: Sans-serif (Inter, Plus Jakarta Sans, or Geist UI via `font-sans`).
- **Heading Styles**: `tracking-[-0.035em] font-semibold leading-[1.08]`.
- **Containers**: Max container width `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`.
- **Glassmorphism**: `backdrop-blur-xl bg-white/[0.03] border border-white/[0.08] shadow-[0_8px_32px_0_rgba(0,0,0,0.36)]`.
- **Noise & Glow**: Ambient radial glow overlays with `pointer-events-none blur-3xl opacity-30`.

---

## 3. Section-by-Section Implementation Blueprint

### A. Persistent Smart Navbar
- **Structure**: Floating pill layout pinned top-center (`fixed top-5 inset-x-0 z-50 max-w-5xl mx-auto px-4`).
- **Visuals**: `bg-[#0D1117]/80 backdrop-blur-md border border-white/10 rounded-full px-5 py-3 flex items-center justify-between`.
- **Components**:
  - **Logo**: Interlocking geometric shape icon (`Layers` or `ShieldCheck` in `#06B6D4`) + text: `"True Service"` with `font-bold tracking-tight text-white`.
  - **Nav Items**: Desktop links (`Modules`, `Omni-Engine`, `Solutions`, `Enterprise`, `Pricing`) with smooth hover state pill indicator.
  - **CTA Array**: `"Sign In"` text link + high-converting gradient pill button: `"Deploy Free Trial"` with `bg-gradient-to-r from-indigo-500 via-purple-500 to-cyan-500 hover:opacity-90 shadow-[0_0_20px_rgba(79,70,229,0.35)]`.
  - **Mobile**: Hamburger trigger revealing an expandable glass menu drawer via Framer Motion.

### B. Hero Section: "The Autonomous Enterprise Engine"
- **Layout**: Centered asymmetrical hero with top announcement badge, dynamic headline, dual CTA, and high-fidelity interactive dashboard mockup.
- **Announcement Pill**:
  - Badge with pinging indicator: `span.relative.flex.h-2.w-2` with `bg-emerald-400 animate-ping`.
  - Copy: *"True Service 4.0: Generative Agent Orchestration is Live"*.
- **Copy Hierarchy**:
  - Headline: `"The First Omnipresent CRM That Enhances Every Customer Touchpoint."`
  - Gradient accent on `"Enhances Every Customer Touchpoint"` using `bg-clip-text text-transparent bg-gradient-to-r from-indigo-300 via-cyan-200 to-emerald-300`.
  - Subhead: *"Eliminate fragmented silos. True Service harmonizes pipeline acceleration, omni-channel autonomous ticketing, field dispatching, and dynamic revenue recovery in one reactive canvas."*
- **Call-to-Action Group**:
  - Primary: Large glowing button (`Start 14-Day Production Run`) with arrow icon (`ArrowRight` Lucide icon).
  - Secondary: Interactive video trigger button (`Watch 2-Min System Architecture`) with a glass play button (`Play` icon).
- **Hero Interactive Showcase**:
  - 3D-angled perspective mockup (`[transform:perspective(1000px)_rotateX(10deg)] hover:[transform:perspective(1000px)_rotateX(0deg)] transition-all duration-700 ease-out`).
  - Inside the mockup:
    - Left rail: Mini icon navigation (`LayoutDashboard`, `Users`, `Bot`, `Workflow`, `TrendingUp`, `Settings`).
    - Top metrics panel: "Gross Retained ARR ($48.2M +24.8%)", "AI First-Contact Resolution (91.4%)", "Average Deal Velocity (12.4 Days)".
    - Real-time pipeline column view with drag-state mock cards and simulated live user cursors labeled with teammate avatars.

### C. Enterprise Proof & Real-Time Telemetry Bar
- **Headline**: Small uppercase tracking label: `"TRUSTED BY SYSTEM ARCHITECTS AT HYPERSCALE ENTERPRISES"`.
- **Logo Cloud**: Monochrome-to-color interactive badges (monochrome SVGs with `opacity-40 hover:opacity-100 transition-opacity duration-300`).
- **Telemetry Counter Strip**:
  - `$18.4B+` Pipeline Tracked
  - `42ms` Global Webhook Sync
  - `99.995%` SLA Availability
  - `3.8x` Pipeline Expansion

### D. Deep Feature Bento Grid: "Complete Enhancement of Every CRM Pillar"
A 6-cell responsive Bento Grid layout (`grid grid-cols-1 md:grid-cols-3 gap-6`) mapping every facet of a full-service CRM:

1. **Card 1: Autonomous Sales Velocity Engine (Spans 2 cols)**
   - *Visual*: Real-time lead progression matrix with dynamic scoring badges (`Score: 98/100 • Hot Route`).
   - *Copy*: Multi-stage pipeline automation with dynamic outreach triggering and deal-slip risk prevention.
   - *Icon*: `Zap` in `text-amber-400`.
2. **Card 2: 360° Living Customer Memory (1 col)**
   - *Visual*: Interactive unified timeline merging email, Slack, Zendesk, Stripe invoices, and phone logs.
   - *Copy*: Graph database tracking every executive change, sentiment dip, and renewal leverage point.
   - *Icon*: `BrainCircuit` in `text-cyan-400`.
3. **Card 3: Autonomous Field & Service Dispatch (1 col)**
   - *Visual*: Map coordinates UI snippet with technician SLA status.
   - *Image*: `https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=800&q=80` (Modern robotics/operations).
   - *Copy*: Dispatch technicians, schedule physical hardware installations, and route emergency logistics instantly.
   - *Icon*: `Truck` in `text-indigo-400`.
4. **Card 4: Voice & Omnichannel Copilot (2 cols)**
   - *Visual*: Audio wave visualizer with live speech-to-intent transcript rendering: *"Client approved tier-3 enterprise tier add-on. Updating contract terms."*
   - *Copy*: In-call automated objection handling, instant SOC-2 compliant meeting summarization, and direct CRM data entry.
   - *Icon*: `Mic` in `text-emerald-400`.
5. **Card 5: Predictive Churn & Expansion Matrix (1 col)**
   - *Visual*: Radial health score gauge displaying `94% Health - Expansion Signal Active`.
   - *Copy*: Early algorithmic warnings that prompt high-touch executive interventions 90 days before contract expiry.
   - *Icon*: `Activity` in `text-rose-400`.
6. **Card 6: Self-Healing Workflow Fabric (2 cols)**
   - *Visual*: Flowchart node canvas with connected paths (`If Lead Inactive > 5 Days -> Trigger Dynamic Video Proposal -> Notify Account Exec`).
   - *Copy*: Zero-code native integrations connecting Salesforce, HubSpot legacy records, SAP, and Snowflake instantly.
   - *Icon*: `Workflow` in `text-violet-400`.

### E. Interactive Workflow Transformation Demo ("Before vs. True Service")
- **Layout**: Interactive two-state comparison component or tab switcher.
- **Tab 1: The Fragmented Legacy CRM**:
  - Cluttered UI, slow reload indicators, manual data entry warnings, disconnected tools, error banners.
  - Subtext: *"3 hours wasted per rep per day on routine admin tasks."*
- **Tab 2: The True Service Unified Standard**:
  - Instantaneous updates, AI autopilot filling fields, automated approvals, frictionless one-click contract dispatch.
  - Subtext: *"Zero manual logs. 100% focused on customer relationship depth."*

### F. Social Proof & Real-World Transformation (Enterprise Reviews)
- **Format**: 3-card customer spotlight featuring verified case studies with rich imagery and performance metrics.
- **Card 1**:
  - Metric: `"+310% Net Dollar Retention"`
  - Quote: *"True Service unified our fragmented sales, ticketing, and engineering pipelines into a single high-velocity cockpit."*
  - Reviewer: **Elena Rostova**, Chief Revenue Officer at Veloce Dynamics.
  - Image: `https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=400&q=80`
- **Card 2**:
  - Metric: `"-74% Ticket Escalation Time"`
  - Quote: *"Our field service team resolves hardware escalations 4x faster thanks to predictive parts dispatching."*
  - Reviewer: **Marcus Sterling**, VP of Operations at GridMatrix Cloud.
  - Image: `https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=400&q=80`
- **Card 3**:
  - Metric: `"4.2x Deal Velocity"`
  - Quote: *"The voice copilot alone paid for the enterprise license in our first billing quarter. There is no comparable tool on the market."*
  - Reviewer: **Devin Vance**, Head of Global Partnerships at Synthetix AI.
  - Image: `https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80`

### G. Transparent & Scalable Pricing Tiers
- **Structure**: Monthly / Annual billing toggle switch with `20% Savings` badge.
- **Tiers**:
  1. **Growth**: `$79/seat/mo` - Full contact lifecycle, predictive scoring, native email/Slack integrations.
  2. **Enterprise Scale (Featured/Highlighted with animated gradient border)**: `$199/seat/mo` - Everything in Growth + Full Autonomous Dispatch, AI Voice Copilot, Custom Retention Models, Dedicated Cluster.
  3. **Global Sovereign**: `Custom / Contact Sales` - On-premise air-gapped deployment, custom LLM fine-tuning, 99.999% SLA, 24/7 dedicated engineering bridge.
- **All Tiers Include**: SOC-2 Type II verification, zero data retention training guarantees, unrestricted API access.

### H. Conversion-Focused Footer CTA & Global Links
- **Mega-CTA Banner**:
  - Background: Deep radial mesh gradient (`bg-gradient-to-b from-indigo-950/40 via-[#0D1117] to-[#05070B] border border-indigo-500/20 rounded-3xl p-12 text-center`).
  - Copy: *"Reclaim 14 Hours Every Week. Upgrade to True Service Today."*
  - Dual action buttons: `Start Free 14-Day Trial` + `Book Solution Architect Demo`.
- **Footer Navigation**:
  - 4 Link Columns: Product, Solutions, Developers & Security, Company.
  - Bottom strip: Copyright, System Status indicator with real-time green badge (`All Systems Operational`), and Social link icons (`Twitter`, `GitHub`, `Linkedin`).

---

## 4. Animations & Micro-Interactions (Framer Motion Specs)

Implement fluid motion guidelines across all elements:

- **Scroll Reveal Defaults**:
  ```tsx
  initial={{ opacity: 0, y: 24 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-80px" }}
  transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
  ```
- **Interactive Bento Card Glow**:
  Implement dynamic mouse-tracking spotlight effect on cards:
  ```tsx
  // Track mouse coordinates on card container and update radial gradient mask
  background: radial-gradient(600px circle at ${mouseX}px ${mouseY}px, rgba(99, 102, 241, 0.12), transparent 40%)
  ```
- **Button Micro-Interactions**:
  - Primary button: `whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}`.
  - Hover sheen: Translate a subtle `45deg` gradient glare across the button surface (`duration: 0.75s`).
- **Interactive Accordion / Modals**:
  - Use `AnimatePresence` with `initial={{ opacity: 0, height: 0 }}` and `animate={{ opacity: 1, height: "auto" }}`.

---

## 5. Technical Requirements & Deliverables

1. **Self-Contained Single File or Clean Modular Layout**: Output complete, functional code without omissions or placeholder comments like `// implement later`.
2. **Accessible (a11y)**: Use semantic HTML5 elements (`<header>`, `<main>`, `<section>`, `<nav>`, `<footer>`), descriptive ARIA labels, and focus rings (`focus-visible:ring-2 focus-visible:ring-indigo-500`).
3. **No Broken Imagery**: Strictly use the provided Unsplash URLs with working fallback avatars and icons.
4. **State Management**: Include working React hooks (`useState`, `useEffect`) for interactive controls:
   - Annual/Monthly pricing toggle state.
   - Interactive Workflow Transformation before/after state switch.
   - Mobile navigation toggle state.
   - Active tab state within the Hero Dashboard preview.
5. **Tailwind Hygiene**: Clean utility groupings without colliding styles. Do not use external arbitrary CSS files; make it entirely self-contained within Tailwind utility classes.

Generate the complete React application fulfilling all specified criteria now.