Build a React application called "SciFind", a modern, dark-mode scientific intelligence platform designed for pharmaceutical and research strategists. It should feel like a "research matrix" — a highly advanced, sciency version of a Bloomberg Terminal.
Tech Stack & Libraries
- React (Functional components, hooks)
- Tailwind CSS (for all styling)
- Recharts (for data visualization)
- Lucide React (for icons)
Visual Aesthetic & Theme
- Background: Very dark navy/slate (
bg-[#0b1121]). Add a subtle CSS background grid pattern and a faint radial gradient glow at the top center.
- Panels: Translucent dark blue/slate (
bg-[#151e32]/80) with glassmorphism (backdrop-blur-md) and subtle borders (border-[#2a3b5c]).
- Typography: Use 'Inter' for standard text and 'JetBrains Mono' (or any monospace font) for data, labels, and technical readouts.
- Accent Colors:
- Primary/Tech: Cyan (
#00e5ff) and Blue (#3b82f6)
- Insights/Sparks: Purple (
#8b5cf6)
- Warnings/Negative: Rose (
#f43f5e)
- Trends/Alerts: Amber (
#f59e0b)
- Effects: Use slightly rounded corners (
rounded-lg), subtle glows on active indicators, and high-contrast text (text-slate-300 for body, text-white for headings).
Global Layout
- Sidebar (Left):
- Logo: "SciFind" (with "Sci" in cyan). Subtitle: "RESEARCH MATRIX v2.4".
- Navigation menu: Dashboard, Daily Briefing, Deep Dive. Use state to switch between these views. Active state should have a cyan left border and translucent background.
- Bottom: Settings button.
- Top Header:
- Search bar with a subtle border and focus ring.
- User profile readout ("RESEARCHER: DR. CHEN") and a glowing cyan "CONNECTED" status indicator.
- Live Ticker (Below Header):
- A continuously scrolling horizontal marquee (CSS animation) showing recent journal publications.
- Format:
[JOURNAL NAME] Paper Title (Trend Icon + Impact %)
- Use green/cyan for positive trends, rose for negative.
View 1: Dashboard
- Header: "GLOBAL RESEARCH LANDSCAPE" with a pulsing "SYSTEM ONLINE" indicator.
- Main Chart (Recharts LineChart): "PUBLICATION VELOCITY (7D)". Show 3 lines (GLP-1, CRISPR, mRNA) over a 7-day period. Use cyan, blue, and purple for the lines. Remove the chart background, use dashed grid lines.
- Side Chart (Recharts RadarChart): "ASSET X-12 vs MARKET LEADER". Compare two entities across axes like Efficacy, Safety, Novelty, Market Size.