Build a React application called "Overseen", an AI-powered copilot for people managers. The app connects to a manager's calendar, "joins" 1:1 meetings to transcribe them, analyzes behavioral patterns (like talking ratios and feedback gaps), and auto-drafts performance reviews.
I need a fully functional frontend demo with rich, realistic mock data. Do NOT use a generic SaaS aesthetic or standard shadcn/ui defaults. Instead, use a "neo-brutalist" / editorial tech design system.
Design System & Styling Rules:
- Framework: React with Tailwind CSS.
- Typography:
- Headings: 'Space Grotesk' (bold, tight tracking)
- Body: 'Inter'
- Labels/Data/Badges: 'JetBrains Mono' (uppercase, tracking-wider, text-sm or text-xs)
- Colors:
- Background Primary: #FDFBF7 (Cream)
- Background Secondary: #F2EFE9
- Text Primary: #1A1A1A (Charcoal)
- Text Secondary: #4A4A4A
- Accents: Orange (#E05D3A), Green (#7A9E7E), Blue (#4A6FA5), Purple (#8B6B9E)
- UI Elements (Neo-Brutalist):
- Use thick borders:
border-2 border-[#1A1A1A]
- Use hard offset shadows instead of soft drop shadows:
box-shadow: 4px 4px 0px #1A1A1A
- Hover states should translate the element slightly and increase the shadow to
6px 6px 0px.
- No rounded corners (use
rounded-none).
Required Libraries:
lucide-react for icons.
recharts for data visualization.
react-router-dom for routing.
date-fns for date formatting.
Application Structure & Pages:
- Landing Page (
/):
- Sticky navbar with logo and "Try Demo" button.
- Hero section with a bold headline: "Become the manager they never want to leave."
- 3 Feature cards (Pre-Meeting Briefs, Behavioral Insights, Auto-Drafted Reviews) using the brutalist card style and different accent colors.
- App Layout (
/app):
- Sidebar navigation (Dashboard, Team, Meetings, Reviews) with active states.
- Mobile-responsive (hamburger menu on small screens).
- Dashboard (
/app):
- Top stats row: Team Sentiment (%), Action Items, Avg Talk Ratio, Upcoming 1:1s.
- "Team Overview" table listing team members, their status (Trending Up, Needs Attention, Stable), and next meeting date.
- "AI Insights" panel flagging specific issues (e.g., "Warning: You haven't given James positive feedback in 42 days" or "Pattern: You spoke 80% of the time in your last 4 meetings with Sarah").
- Team Member Detail (
/app/team/:id):
- Profile header with avatar, role, and sentiment score.
- A horizontal stacked Bar Chart (using Recharts) showing the "Talking Ratio" between the Manager and the Report.
- A list of past meeting summaries with this specific team member, showing open action items.
- Meeting Detail (
/app/meeting/:id):
- Header with meeting date, time, and participant.
- AI Summary block.
- Two-column layout:
- Left: Action Items checklist and AI Meeting Insights (e.g., "Sentiment was positive when discussing design work").
- Right: A full chat-style transcript of the meeting with timestamps.
- Performance Review (
/app/review/:id):
- A document-style view of an AI-drafted performance review.
- Sections: Executive Summary, Core Strengths (numbered list), Areas for Growth, and Proposed Goals for Next Period.
- Action buttons to "Edit Draft" or "Export to HRIS".
Mock Data Requirements: