Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Marketing Effectiveness Score is a web application designed to help users evaluate their marketing performance by assessing key metrics such as revenue, website traffic, lead volume, ad spend, and social media activity. By answering these questions, users receive an overall score, identify their biggest growth opportunity, and are provided with recommended next steps, all while capturing leads before displaying the report.

## CORE FEATURES
1. **User Input Form**: Users can input their current monthly revenue, website traffic, lead volume, ad spend, and social media activity to generate their marketing score.
2. **Score Calculation**: The application calculates an overall marketing effectiveness score based on the provided metrics.
3. **Growth Opportunities**: Users are shown their biggest growth opportunity based on the input data, helping them focus their efforts effectively.
4. **Recommended Next Steps**: The application provides actionable insights and recommendations tailored to the user's current marketing situation.
5. **Lead Capture**: Before displaying the score and recommendations, users must submit their contact information, allowing for effective lead generation.
6. **User Dashboard**: A simple dashboard where users can view their previous scores and track improvements over time.

## 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**: A single-column layout for the input form, followed by a results section that displays the score, growth opportunities, and recommendations in a clean and organized manner.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or similar for managing user inputs and results.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project using TypeScript. Install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Create Input Form**: Design and implement a user input form using controlled components to capture monthly revenue, website traffic, lead volume, ad spend, and social media activity.
3. **Implement Score Calculation Logic**: Write a function to calculate the overall score based on the inputs provided.
4. **Develop Growth Opportunity Algorithm**: Create logic that determines the biggest growth opportunity based on user input.
5. **Design Recommendations Section**: Implement a section that displays tailored recommendations based on the calculated score and growth opportunity.
6. **Integrate Lead Capture**: Add functionality to capture user contact information before displaying the score and recommendations.
7. **Build User Dashboard**: If applicable, create a simple user dashboard to track previous scores and insights.
8. **Test Responsiveness**: Ensure that the application is responsive and visually appealing on various devices.

## USER EXPERIENCE
Users will start by entering their marketing metrics into a clean and simple form. Upon submission, they will see a loading animation while the score is calculated. After capturing their lead information, users will be presented with their marketing effectiveness score alongside insights on potential growth opportunities and actionable recommendations. The intuitive layout and minimalist design will ensure a seamless user experience, encouraging users to return for future assessments.