Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a scrolling roadmap that reacts to user scrolling, allowing for personalized UI elements. The focus is on creating an interactive experience where users can engage with the roadmap dynamically, enhancing their understanding of the content through visual feedback.

## CORE FEATURES
1. **Interactive Scrolling Roadmap**: A visually engaging roadmap that reveals content as the user scrolls, enhancing interaction and engagement.
2. **Customizable UI Elements**: Users can personalize the appearance and behavior of each element on the roadmap, tailoring the experience to their preferences.
3. **Responsive Design**: A layout that adapts seamlessly to various screen sizes, ensuring usability on both desktop and mobile devices.
4. **Smooth Animation Effects**: Implement smooth animations that trigger during scroll events, providing visual feedback and enhancing user experience.
5. **Content Management**: A system for managing the content displayed on the roadmap, allowing for easy updates and customization.

## 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 consists of a full-width hero section at the top, followed by the scrolling roadmap, and a footer for additional information and contact details.

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

## IMPLEMENTATION STEPS
1. **Set Up React Environment**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create the Roadmap Component**: Develop the main scrolling roadmap component to handle scroll events and display content dynamically.
4. **Implement Customization Features**: Allow users to customize UI elements through a settings panel, updating the roadmap's appearance based on user input.
5. **Add Animation Effects**: Use CSS transitions and animations to enhance the scrolling experience, providing visual feedback as elements come into view.
6. **Ensure Responsiveness**: Test the application on various screen sizes and implement media queries where necessary to maintain usability.
7. **Deploy the Application**: Use platforms like Vercel or Netlify to deploy the application and make it accessible to users.

## USER EXPERIENCE
Users will interact with a visually appealing scrolling roadmap that responds to their scrolling actions, revealing new content as they navigate. Customization options will allow users to tailor the appearance of the roadmap, while smooth animations will provide an engaging experience. The application will be optimized for both desktop and mobile devices, ensuring a seamless user journey regardless of the platform.