Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web-based platform focused on providing an interactive experience showcasing various car models and their components. Users can explore detailed visual animations of car parts that dynamically open and close as they scroll horizontally, while also enjoying engaging vertical scrolling animations that reveal interesting car-related content.

## CORE FEATURES
1. **Interactive Car Animation**: Central to the website, the car image will animate components that open when scrolling left and close when scrolling right, providing an engaging way to learn about car mechanics.
2. **Content Sections**: Scrollable sections below the car animation will present informative articles, fun facts, and videos about different cars and automotive technology.
3. **Smooth Scrolling Animations**: Implement smooth transitions and animations for both horizontal and vertical scrolling to enhance user engagement and visual appeal.
4. **Responsive Design**: The website will be fully responsive, ensuring a seamless experience across devices, from desktops to tablets and smartphones.
5. **Colorful Visual Elements**: While maintaining a minimalist aesthetic, vibrant color accents will highlight key features and components to draw users’ attention without overwhelming the overall design.
6. **User Feedback Mechanism**: Allow users to provide feedback or ask questions about the car components, enhancing interactivity and user involvement.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a clean and simple layout, incorporating plenty of white space to ensure focus on the car animation and content.
- **Color Mode**: Light theme featuring a light background with dark text for optimal readability, complemented by colorful accents for car components and interactive elements.
- **Layout**: The main layout will consist of a centered car animation at the top, followed by a vertical scroll area that includes multiple content sections. Each section will have a clear separation but maintain a cohesive flow.
- **Typography**: Utilize a sans-serif font for a modern look, with larger headers (24px) and smaller body text (16px) to establish a clear hierarchy. Suggested fonts include 'Roboto' or 'Open Sans'.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a scalable and maintainable application.
- **Styling**: Tailwind CSS for utility-first styling, allowing for quick adjustments and a clean approach to layout and design.
- **UI Components**: Utilize shadcn/ui for pre-built, accessible UI components that fit the minimalist design.
- **State Management**: Consider using React's Context API or Zustand for state management to handle user interactions and component states smoothly.

## IMPLEMENTATION STEPS
1. **Initialize Project**: Set up a new React project with TypeScript and install Tailwind CSS and shadcn/ui components.
2. **Create Main Layout**: Design the main layout with a centered car animation component at the top and placeholders for content sections below.
3. **Implement Car Animation**: Develop the car animation logic using CSS animations and JavaScript to control the opening and closing of car components based on scroll position.
4. **Build Content Sections**: Create several scrollable sections that display informative content about cars, utilizing Tailwind CSS for styling.
5. **Add Smooth Scrolling Effects**: Implement smooth scrolling animations for both horizontal and vertical movements using CSS transitions.
6. **Test Responsiveness**: Ensure that the design is responsive, adjusting layouts and components for different screen sizes and orientations.
7. **Incorporate User Feedback**: Add functionality for user feedback, allowing users to submit questions or comments about the car components.

## USER EXPERIENCE
Users will be greeted by the dynamic car animation upon entering the site. As they scroll horizontally, they will witness the car components smoothly opening, revealing detailed information and visuals. Scrolling down will guide them through various content sections filled with engaging facts and articles about cars. The combination of colorful accents and minimalist design ensures that users remain focused and engaged throughout their exploration, while responsive design guarantees a pleasant experience on any device.