Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web dashboard designed to provide a comprehensive overview of event engagement metrics for Brandbox Live. It will facilitate the analysis of brand and investor interactions, helping users track engagement, conversion indicators, and insights in a clean and structured interface.

## CORE FEATURES
1. **Event Overview**: Displays foundational event details such as name, date, format, participating brands, and attending buyers and investors.
2. **Engagement Metrics**: Provides a summary of interactions including total buyer and investor interactions, initiated meetings, and repeat engagements.
3. **Brand-Level Activity**: Highlights engagement metrics for individual brands, including buyer and investor interest levels and current statuses.
4. **Buyer & Investor Activity**: Lists the most active buyers and investors, the categories they engaged with, and the number of brands each interacted with.
5. **Conversion Indicators**: Tracks progress from meetings to follow-ups, ongoing conversations, and brands advancing to the next stage.
6. **Insights and Next Steps**: Displays analytics on top-performing categories, pricing tiers, and emerging patterns, along with a log of scheduled follow-ups and confirmed meetings.

## 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 will consist of a top navigation bar, followed by structured sections for event details, engagement metrics, brand activity, and insights, ensuring a clear hierarchy of information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for responsive design and utility-first styling.
- **UI Components**: shadcn/ui for pre-built UI components to speed up development.
- **State Management**: Use React's Context API or Zustand for managing global state as needed.

## IMPLEMENTATION STEPS
1. **Set up the React application** using Create React App with TypeScript template.
2. **Install Tailwind CSS** and configure it for the project, ensuring utility classes are available for styling.
3. **Create a navigation component** that includes links to different sections of the dashboard.
4. **Build the main dashboard layout** with structured sections for event overview, engagement metrics, brand activity, insights, and next steps.
5. **Develop core components** for displaying metrics, including charts for engagement indicators and lists for active buyers and investors.
6. **Implement state management** to handle the flow of data throughout the application, ensuring metrics update dynamically based on user interactions.
7. **Ensure responsiveness** by testing on various screen sizes and adjusting the layout using Tailwind CSS utilities.

## USER EXPERIENCE
Users will interact with a streamlined dashboard that allows them to easily navigate through different sections to view event metrics and insights. Key interactions include filtering engagement data, viewing detailed metrics for each brand, and accessing insights that guide follow-up actions. The minimalist design ensures a focus on data without unnecessary distractions, enhancing the overall user experience.