Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to consolidate interactive Ghibli and Disney movie experiences into a fun and engaging platform. It will feature animated reads and visuals reminiscent of webtoons, providing users with an aesthetically pleasing and interactive storytelling environment.

## CORE FEATURES
1. **Interactive Story Reads**: Users can explore animated Ghibli and Disney stories presented in a scrollable webtoon format, allowing for an immersive reading experience.
2. **Movie Database**: A comprehensive library of Ghibli and Disney movies, complete with descriptions, ratings, and user reviews.
3. **Dynamic Landing Page**: An eye-catching homepage that highlights featured stories and movies, encouraging user interaction and exploration.
4. **User Profiles**: Allows users to create profiles to save favorite stories, receive personalized recommendations, and track reading progress.
5. **Comments and Community**: A section for users to comment on stories, share thoughts, and interact with others, fostering a community around shared interests.
6. **Responsive Design**: An adaptable design that ensures a seamless experience across desktop and mobile devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: The design will be minimalist, emphasizing a clean and simple aesthetic with ample white space. The focus will be on readability and user engagement, with interactive elements standing out.
- **Color Mode**: The application will utilize a light theme with dark text on light backgrounds to enhance readability and maintain a soothing visual experience.
- **Layout**: The main layout will feature a top navigation bar, a central content area for story reads, and a sidebar for movie recommendations and user comments. Key sections will be well-defined with plenty of spacing to avoid clutter.
- **Typography**: Use a combination of sans-serif fonts for headings (such as Montserrat) and a serif font for body text (such as Merriweather) to create a pleasant reading experience. Headings will be bold and larger to establish a clear hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building the application components.
- **Styling**: Tailwind CSS for utility-first styling approach, ensuring a clean and responsive design.
- **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 user profiles and comments efficiently.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui for styling.
2. **Create Core Components**: Develop components for the landing page, story viewer, movie database, user profiles, and comments section.
3. **Establish Routing**: Use React Router for navigating between different sections of the application, ensuring smooth transitions.
4. **Implement State Management**: Set up state management for user profiles and community interactions, allowing for dynamic updates.
5. **Design Layout**: Apply Tailwind CSS to structure the layout as specified, ensuring responsiveness across devices.
6. **Integrate Animation**: Use CSS animations or a library like Framer Motion to enhance the interactive elements and story transitions.
7. **Testing and Debugging**: Conduct thorough testing across various devices and browsers to ensure functionality and design integrity.

## USER EXPERIENCE
Users will be greeted with a visually appealing landing page showcasing featured stories and movies. They can easily navigate through the site using a clean top menu and sidebar, allowing them to explore stories in an interactive manner. Clicking on a story will present it in a dynamic format, complete with animations, enhancing engagement. Users can leave comments, track their favorites, and connect with others, creating a vibrant community around their shared love for Ghibli and Disney animations. The responsive design ensures that every interaction is seamless, whether on desktop or mobile devices.