Build a complete web application called "Mapd" (mapd.ai) — a product feature prioritization engine for software teams. The app aggregates customer feedback from multiple channels (Slack, Intercom, Sentry, meetings, GitHub), uses AI to detect cross-channel patterns, and helps product teams decide what to build next by ranking issues by business impact. It solves Stage 1 of building ("What tf do we build?") by turning scattered feedback into a clear, prioritized roadmap.

WHO: Product managers, engineering leads, and founders at Series A-C SaaS companies (50-500 employees) who are drowning in scattered customer feedback across Slack, support tickets, error logs, meeting notes, and GitHub issues — and can't figure out what to build next.

WHAT: A SaaS dashboard that ingests feedback from 5+ channels, uses AI to detect cross-channel patterns, auto-triages issues by business impact, and produces a prioritized backlog — replacing 14+ hours/week of manual triage.

WHY: Product teams spend 30% of their time just gathering and organizing feedback before they can even start prioritizing. By the time they've read every Slack thread, support ticket, and error log, the critical stuff is already buried. Mapd turns that chaos into a ranked list of what matters most — with the receipts to prove it.

This is a DEMO app. Use hardcoded dummy data throughout. No real authentication — clicking "Try the Demo" or "Open Dashboard" on the landing page navigates directly into the app. No login screen, no signup forms. The demo user is "Sarah Chen", VP Product at a B2B SaaS company called "Stackwise" (~180 employees, ~2,400 customers). All data is fake but realistic and internally consistent — 30 days of realistic product feedback from 5 channels.


VISUAL STYLE:

Dark mode SaaS dashboard aesthetic — inspired by Linear, Loops, and Raycast. The feel should be premium, data-dense, and calm — like a mission control for product decisions.

Background: near-black (#0A0A12). Card surfaces: dark charcoal (#13131A) with subtle 1px borders (#1E1E2A). Primary accent: electric indigo (#6366F1). Secondary accent: emerald (#10B981) for success/positive. Tertiary accent: amber (#F59E0B) for warnings. Error/critical: rose (#EF4444). Info: sky blue (#38BEF8).

Text: white (#F5F5F7) for headings, light gray (#A1A1AA) for secondary text. Use the Inter font family throughout.

Cards should use subtle glassmorphism — slight background blur (backdrop-filter: blur(12px)) and transparency (rgba(19,19,26,0.85)). Rounded corners (14px) on all cards and containers. Generous spacing — 24px padding inside cards, 16px gap between grid items.

Use a subtle indigo-to-cyan gradient (#6366F1 to #06B6D4) on hero sections, key CTAs, and primary action buttons. Hover effects on cards should slightly brighten borders. Buttons have a slight scale(1.02) on hover.

LOGO: The Mapd logo should be the text "mapd" in lowercase, semi-bold Inter font, white — with a small compass/radar icon in electric indigo (#6366F1) before the text. The icon should suggest pattern detection and navigation. Use this in the nav, sidebar, and footer.


PAGES AND ROUTES:

Route Page
/ Landing Page (marketing)
/app Dashboard (home)
/app/patterns Pattern Detection
/app/triage Auto-Triage Queue
/app/analytics Analytics

The landing page (/) has its own layout — no sidebar, just a sticky nav bar.

All /app/* pages share an app layout with a fixed left sidebar (desktop) that collapses to a hamburger overlay on mobile.


PAGE 1: LANDING PAGE (route: "/")