Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The "Company Intelligence Platform" web application for SRM University is designed to provide a comprehensive overview of corporate relationships and insights. Utilizing a modern tech stack, including React, Vite, and Tailwind CSS, this application delivers a clean, responsive interface that allows users to explore company information and skill matrices dynamically.

## CORE FEATURES
1. **Main Dashboard**: A central hub featuring a hero banner and summary cards for quick access to company profiles and navigation links to key sections.
2. **Company Intelligence Page**: A detailed view of selected companies, displaying data such as financials, culture, and technology stack in an organized format.
3. **Skill Matrix Page**: A visual representation of the skills required by companies, featuring color-coded badges and progress indicators for each skill.
4. **Dynamic Content Rendering**: All application data is driven by a JSON structure, allowing for flexible updates and easy management of company information.
5. **Responsive Design**: The application is fully responsive, ensuring a seamless experience across devices and screen sizes.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The layout should feature a clean grid system with responsive cards for information display, a hero banner at the top, and a sidebar for navigation links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified, but consider using React's built-in state management or Context API if needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Vite and configure TypeScript.
2. **Install Dependencies**: Add Tailwind CSS, React Router, and other necessary libraries (shadcn/ui, Framer Motion).
3. **Create Data Structure**: Create a JSON file (`src/data/mockCompanies.json`) that contains mock company data based on the specified schema.
4. **Build Components**:
   - Create the Main Dashboard component with a hero banner and quick navigation cards.
   - Develop the Company Intelligence component to display detailed information using accordion or grid layouts.
   - Implement the Skill Matrix page with color-coded badges and progress bars.
5. **Set Up Routing**: Use `react-router-dom` to define routes for the main dashboard, company intelligence, and skill matrix pages.
6. **Style Components**: Apply Tailwind CSS classes to ensure a clean, minimalist design that adheres to the specified design system.
7. **Implement Transitions**: Use Framer Motion to add subtle page transitions between different views.
8. **Test Responsiveness**: Ensure the application is fully responsive and functions well on various devices and screen sizes.

## USER EXPERIENCE
Users will interact with a straightforward interface that emphasizes ease of navigation and information retrieval. The main dashboard will provide instant access to key company summaries and navigation options, while the detailed company intelligence and skill matrix pages will allow users to delve deeper into specific data insights. The application will gracefully handle any missing data, ensuring a seamless user experience with fallback messages.