Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as an A/B testing experiment manager, allowing users to create, edit, and delete experiments. The app will facilitate the management of various experiment states, from draft to published, enhancing user engagement through a streamlined interface for setting up and analyzing A/B tests.

## CORE FEATURES
1. **Experiment Management**: Users can create, edit, and delete experiments with states including draft, paused, in progress, testing, published, and completed.
2. **Variant Configuration**: Users can add multiple variants to each experiment, allowing for detailed control over test parameters and configurations.
3. **Metrics Setup**: Primary and secondary metrics can be defined for each experiment, with options to edit or remove them as needed.
4. **Audience Targeting**: Users can select specific nationalities for each variant, ensuring tailored testing for different demographics.
5. **State Transitions**: Experiments can transition between states (e.g., from draft to in progress or paused), providing flexibility in experiment management.
6. **Save and Publish Options**: Users can save experiments as drafts or publish them to initiate testing, with validation checks on mandatory fields.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, a minimal color palette, and a strong focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and user comfort.
- **Layout**: A structured grid layout that organizes content into distinct sections: a sidebar for navigation, a main content area for experiment details, and a footer for actions. Each section should have ample padding and margins for clarity.
- **Typography**: Use a sans-serif font for body text (e.g., Open Sans or Roboto) with a larger, bold variant for headings to establish a clear visual hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust type safety and component management.
- **Styling**: Tailwind CSS for utility-first styling that supports rapid design adjustments and responsiveness.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Consider using React Context API or Zustand for managing global state related to experiments and user interactions.

## IMPLEMENTATION STEPS
1. **Initialize Project**: Set up a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui components to the project.
3. **Create Core Components**: Build components for Experiment List, Experiment Form, Variant Configuration, Metrics Setup, and Audience Selection.
4. **Implement State Management**: Use React Context or Zustand to manage the state of experiments and variants, ensuring smooth transitions between states.
5. **Design Layout**: Use Tailwind CSS to implement the minimalist layout, focusing on spacing, alignment, and responsive design.
6. **Develop Functionality**: Implement the logic for adding, editing, and deleting experiments and their variants, including percentage calculations for variant distribution.
7. **Testing and Validation**: Ensure all mandatory fields are validated and provide user feedback for each action (e.g., saving as draft or publishing).
8. **Deployment**: Prepare the application for deployment on a web server, ensuring all features are functional and responsive across devices.

## USER EXPERIENCE
Users will interact with the application through a straightforward dashboard where they can easily navigate between experiments. Creating a new experiment involves filling out the general information, selecting variants, and setting metrics. Clear calls to action for saving as draft or publishing an experiment will guide users through the process. The responsive design ensures accessibility on both desktop and mobile devices, with a seamless experience throughout all stages of experiment management.