Build a high-fidelity, dark-themed React web application called "Ideas Vault". This app acts as a secure repository where users store startup ideas, and an "AI Agent" (simulated) passively researches them to provide market validation, competitor analysis, and readiness scores.
Tech Stack:
- React (Functional Components, Hooks)
- Tailwind CSS (Styling, Animations)
- Lucide React (Icons)
- Recharts (Data Visualization)
- Font: Inter (Google Fonts)
Design System:
- Background: Deep Slate/Navy (#0f172a to #1e293b).
- Text: Slate-200 for body, White for headings.
- Accents: Indigo/Violet gradients for primary actions.
- Status Colors: Emerald (Success/Ready), Amber (Warning/Processing).
- Aesthetics: Modern SaaS, rounded corners (rounded-xl or 2xl), subtle borders (border-slate-700), glassmorphism effects on modals/overlays.
Core Features & Views:
- Landing Page:
- A marketing-style hero section.
- Headline: "Your startup ideas, researched on autopilot."
- "Open Your Vault" button that transitions to the main app state.
- Background elements: Subtle glowing orbs or gradients.
- App Layout:
- Sidebar: Fixed left navigation (hidden on mobile, hamburger menu to toggle).
- Links: Vault (Dashboard), Weekly Digest, Board (Team), Settings.
- Bottom: Log Out.
- Mobile Nav: Bottom fixed bar for small screens.
- Dashboard (The Vault):
- Grid layout of "Idea Cards".
- Idea Card:
- Title & Short Description (truncated).
- Tags (e.g., #SaaS, #FinTech).
- Status Badge: "Ready" (Green) or "Agents Analyzing..." (Amber pulse animation).
- Icon indicating input type (Text, Voice, or Image).
- Add Button: prominent button to open the Capture Modal.
- Capture Modal:
- A centered modal with a backdrop blur.
- Tabs: Text, Voice Note, Snapshot.
- Inputs: Title (text), Description (textarea).
- Simulation:
- For Voice: A fake "listening" animation when the mic is clicked.
- For Image: A drag-and-drop zone placeholder.
- Action: "Send to Vault" button. When clicked, simulate a network request (2-second delay) then add the idea to the Dashboard list with a "Ready" status and generated mock data.
- Idea Detail View:
- Opened when clicking a card.
- Header: Title, Status Badge, Back button, Share/Download icons.
- Concept Section: Full description and tags.
- Readiness Score: A large, prominent number display (0-100) styled cleanly (no circular charts).
- Key Metrics (Grid):
- TAM (Total Addressable Market) e.g., "$1.2B".
- Primary Target Audience.
- Top Competitor Name & Strength.
- Key Market Trend.
- Growth Chart: A Recharts BarChart showing projected market growth over 4 years.
- Competitor List: A list of competitors with "Strength" (Green check) and "Weakness" (Amber alert) attributes.
- Action Plan: A list of 3 suggested next steps.
Data & Logic: