Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide users with a comprehensive library of stretching exercises, complete with short mannequin illustrations in both video and image formats. The primary purpose is to educate users about various stretches for different muscle groups, enhancing their flexibility and overall physical health.

## CORE FEATURES
1. **Exercise Library**: A categorized list of stretching exercises targeting different muscle groups, each with detailed descriptions and illustrations.
2. **Illustration Gallery**: High-quality mannequin illustrations and videos for each stretch, providing users with clear visual guidance.
3. **Search Functionality**: Users can easily search for specific stretches by muscle group or exercise name.
4. **User Favorites**: Allow users to save their favorite stretches for quick access in the future.
5. **Responsive Design**: Ensure that the application is accessible and visually appealing on various devices, including mobile and tablet.
6. **Educational Resources**: Include tips and best practices for stretching safely and effectively.

## 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-page layout with a hero section at the top, followed by the exercise library, search functionality, and a footer with contact information.

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

## IMPLEMENTATION STEPS
1. **Set up the Project**: Initialize a new React project using Create React App with TypeScript. Install Tailwind CSS and shadcn/ui for styling.
2. **Create the Exercise Data Model**: Define the structure of the exercise data, including fields for name, description, illustrations (video and image links), and muscle group.
3. **Develop the Components**:
   - Create a `Hero` component for the top section of the page.
   - Develop an `ExerciseList` component to display the list of stretches.
   - Create an `ExerciseItem` component to show individual stretches with illustrations.
   - Implement a `SearchBar` component to filter exercises.
   - Add a `Favorites` component to manage user-favorite stretches.
4. **Implement State Management**: Use Redux or Context API to manage the state of user favorites and search queries.
5. **Responsive Design**: Ensure all components are responsive and adapt to different screen sizes using Tailwind CSS.
6. **Testing**: Write unit and integration tests to ensure all functionalities work as expected.

## USER EXPERIENCE
Users will land on a clean and minimalist homepage featuring a hero section that introduces the stretching library. They can easily navigate through the categorized exercise library, utilizing the search functionality to find specific stretches. Each exercise item will display a description along with corresponding illustrations. Users can save their favorite stretches for future reference, creating a personalized experience. The design will prioritize ease of use and accessibility, ensuring a seamless interaction across devices.