Marketplace
Service catalog showcasing ThreatOps security service offerings with category-based navigation, service cards, and onboarding integration.
Overview
The Marketplace serves as the service catalog for the ThreatOps SOCaaS platform. It presents the available security service categories -- Detection & Response, External Defense, Proactive Defense, and Cyber Posture Management -- in a structured, browsable format. Customers can explore service offerings, watch platform overview videos, and initiate onboarding through "Get Started" CTAs that link directly to the support case creation flow. This module bridges the gap between marketing and operational onboarding.
What Was Proposed
- Service catalog with categorized security offerings
- Tab-based navigation: Recommended, Detection & Response, External Defense, Proactive Defense, Cyber Posture Management, Gap Analysis
- Hero banner with platform overview and video demo
- Product cards with service listings and "Get Started" CTAs
- Shopping cart functionality (placeholder)
- Integration with support cases for onboarding requests
What's Built Complete
- Full marketplace page with 6-tab navigation bar
- Hero banner with dark gradient background, "ThreatOps SOCaaS Platform" branding, description, and play button for video demo modal
- 4 product category cards in a 2x2 grid:
- Detection & Response: MDR (Managed Detection & Response)
- External Defense: Digital Risk Protection, Third-Party Risk Management
- Proactive Defense: Assets, Vulnerability Management
- Cyber Posture Management: Posture Self-Assessment
- "Get Started" buttons on each card that redirect to
/support-cases/new?subject=Get Started with {category} - Shopping cart button with "coming soon" toast notification
- Video modal with placeholder for platform overview demo
- Toast notification system with auto-dismiss
- Service items displayed as icon-labeled chips with blue accents
- Maturity indicator placeholder per category
- Dashboard breadcrumb link
Architecture
Frontend-Only Module
The Marketplace is currently a frontend-only module with static product data defined in the component. It integrates with the support cases module by navigating to the case creation form with pre-populated subjects. Future iterations may introduce a backend product catalog API.
Marketplace Page
+---------------------------+
| Tab Navigation (6 tabs) |
| Hero Banner + Video Modal |
| Product Grid (2x2) |
| +-------------------+ |
| | Category Card | |
| | Services (chips) | |
| | "Get Started" CTA |---+-> /support-cases/new?subject=...
| +-------------------+ |
| Toast Notifications |
| Cart (placeholder) |
+---------------------------+Routing
Prerequisites
- Authenticated user (any role)
- No API dependencies -- all data is client-side
Data Model
Product Category
| Field | Type | Description |
|---|---|---|
| category | string | Category name in uppercase (e.g., "DETECTION & RESPONSE") |
| icon | component | Lucide icon component for the category |
| services | array | List of {label, icon} service items |
| maturity | string | Maturity level indicator (currently "n/a") |
Service Categories
| Category | Services | Icon |
|---|---|---|
| Detection & Response | MDR | Shield |
| External Defense | Digital Risk Protection, Third-Party Risk Management | Globe |
| Proactive Defense | Assets, Vulnerability Management | Crosshair |
| Cyber Posture Management | Posture Self-Assessment | BarChart3 |
UI Description
Header
Left side: filter icon with "Marketplace" title and "Dashboard" breadcrumb link. Right side: quick links bar with shopping cart button (blue).
Tab Bar
Horizontal tab navigation with 6 tabs: Recommended, Detection & Response, External Defense, Proactive Defense, Cyber Posture Management, Gap Analysis. Active tab has blue bottom border.
Hero Banner
Dark gradient (slate-800 to slate-700) rounded banner. Left side: "ThreatOps" label in blue, large "ThreatOps SOCaaS Platform" heading in white, description text. Right side: circular play button with white border for video demo.
Product Grid
2-column grid of white cards. Each card has: category name as uppercase header, "GET STARTED" button (blue outline) that links to support cases, service items as icon+label chips in a flex-wrap layout, and maturity indicator at the bottom.
Video Modal
Dark overlay with centered modal containing title, video placeholder area with play icon, and close button.
Toast Notification
Bottom-right positioned dark toast with message text and close button. Auto-dismisses after 3 seconds.
Source Files
| Component | Path |
|---|---|
| Frontend Page | platform/frontend/src/app/marketplace/page.tsx |