Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to facilitate a cinematic, full-screen storytelling deck for presentations aimed at the Enterprise Presales team. The application will utilize interactive storytelling techniques and presenter tools to transform the way presentations are delivered, aligning with modern enterprise sales strategies.

## CORE FEATURES
1. **Cinematic Presentation Mode**: A full-screen, visually rich presentation experience that mimics storytelling similar to platforms like Netflix.
2. **Interactive Presenter Tools**: Features that allow the presenter to navigate through content seamlessly, trigger animations, and highlight key points in real-time.
3. **Usage Metrics Dashboard**: A section that displays key usage metrics and engagement levels during the presentation, assisting the presenter in demonstrating the effectiveness of the proposed strategies.
4. **Simulated Usage Scenarios**: Real-life scenarios that showcase how the solutions can be implemented, including Day-in-the-Life simulations for various roles within the organization.
5. **30-60-90 Day Plan Visuals**: Structured visuals displaying the strategic roadmap for implementation, helping to clarify the timeline and expected outcomes.
6. **Feedback and Notes Section**: An area for presenters to jot down notes or gather feedback during or after the presentation.

## 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 main layout will feature a full-screen presentation area, with a sidebar for presenter tools, and a dashboard area for metrics and notes.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for consistent design elements.
- **State Management**: Zustand for lightweight global state management.

## IMPLEMENTATION STEPS
1. **Project Setup**: Initialize a new React project using Vite and install necessary dependencies (React, TypeScript, Tailwind CSS, Zustand, Framer Motion, and Phosphor Icons).
2. **Design Layout**: Create the main layout structure with a full-screen presentation area, sidebar for presenter tools, and a dashboard for metrics.
3. **Implement Core Features**:
   - Develop the cinematic presentation mode with Framer Motion for smooth transitions.
   - Build interactive presenter tools allowing navigation and content highlighting.
   - Create a usage metrics dashboard that fetches and displays data regarding engagement.
   - Simulate usage scenarios with predefined scripts and responses.
   - Design the 30-60-90 Day Plan visuals to be dynamic and easy to interpret.
   - Implement a feedback and notes section for presenters.
4. **Styling**: Use Tailwind CSS to apply the specified design specifications throughout the application.
5. **Testing**: Conduct thorough testing for responsiveness and functionality across different devices.

## USER EXPERIENCE
The application will offer a seamless user experience, allowing presenters to engage their audience through immersive storytelling. Users will navigate through the presentation using intuitive controls, see real-time usage metrics, and interact with the content in a meaningful way. The design will ensure that all elements are easy to understand and visually appealing, fostering clarity and engagement during presentations.