Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves optimizing a mobile application's home screen stepper design to ensure all elements fit properly within the mobile viewport. The aim is to enhance user experience by preventing key buttons from being cut off during mobile viewing, ensuring a seamless interaction for users.

## CORE FEATURES
1. **Responsive Design**: The stepper will adjust dynamically to different screen sizes, maintaining visibility of all buttons and UI elements.
2. **Mobile Optimization**: Special attention will be given to mobile layouts to ensure no buttons are cut off and all content is accessible.
3. **Intuitive Navigation**: Users can easily navigate through the stepper with clear indicators for progress and action buttons.
4. **Error Handling**: Users will receive feedback if they attempt to proceed without completing necessary steps.
5. **Customization Options**: The stepper can be customized in terms of color and style to match the overall application theme.

## 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 vertical stepper, with each step clearly defined, and ample spacing to enhance readability and interaction.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API for managing stepper state if needed

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize 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 Stepper Component**: Build a responsive stepper component that adjusts based on screen size.
4. **Implement Navigation Logic**: Code the functionality for moving between steps, ensuring that buttons are always visible.
5. **Add Styling**: Utilize Tailwind CSS for styling, applying the specified primary color, typography, and border radius.
6. **Test Across Devices**: Ensure the design works seamlessly on various mobile devices to confirm that no buttons are cut off.
7. **Deploy Application**: Use a service like Vercel or Netlify to deploy the application for testing and feedback.

## USER EXPERIENCE
Users will interact with the stepper by tapping buttons to navigate between steps. Each step will provide clear instructions and feedback, enhancing usability. The design will maintain a clean aesthetic, with well-defined spacing, allowing users to focus on the content without distractions. Adjustments for mobile will ensure that all interactive elements are easily accessible, leading to a positive user experience.