Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based interactive platform that consolidates Ghibli and Disney movies into a fun, engaging experience. Users can explore animated stories presented in a visually appealing webtoon style, accompanied by AI voice narration to enhance the storytelling experience.

## CORE FEATURES
1. **Interactive Story Selection**: Users can browse a collection of Ghibli and Disney stories, each represented by vibrant, unique visuals. Clicking on a story thumbnail opens an interactive reading experience.
   
2. **AI Voice Narration**: Incorporate two AI voice options (one male, one female) to narrate the stories. Users can toggle between voices and adjust volume for an immersive experience.

3. **Dynamic Story Display**: Upon selecting a story, content is displayed in a visually engaging format, utilizing animations and transitions to maintain user interest.

4. **Themed Visual Elements**: Each story features distinct visual themes and styles, ensuring a unique experience for each narrative without duplicating images across different stories.

5. **User-Friendly Interface**: The application emphasizes a clean and minimalist design, allowing users to navigate easily and focus on the stories.

6. **Responsive Design**: The platform will be fully responsive, optimizing the user experience across various devices, including desktops, tablets, and smartphones.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design focusing on simplicity, ample white space, and a clean layout.
- **Color Mode**: Light theme featuring subtle pastel colors, complemented by dark text that enhances readability.
- **Layout**: A grid layout for story thumbnails on the home page, with a detailed view area that opens upon selecting a story. The detailed view includes interactive elements and voice options.
- **Typography**: Use a combination of sans-serif fonts for headers (e.g., Montserrat) and a readable serif font for body text (e.g., Lora) to create a nice contrast and enhance readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building the user interface.
- **Styling**: Tailwind CSS for utility-first styling, ensuring a clean and responsive layout.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design.
- **State Management**: Implement React's Context API or a state management library like Redux for managing application state effectively.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Core Components**: Build components for the story grid, individual story display, and AI voice controls.
3. **Implement Routing**: Use React Router to handle navigation between the home page and story details.
4. **Integrate AI Voice Feature**: Use a suitable API for AI voice synthesis to provide the narration functionality.
5. **Design Layout and Styling**: Apply Tailwind CSS for styling components according to the minimalist design principles.
6. **Test Responsiveness**: Ensure the application is responsive across all devices, adjusting styles as necessary.
7. **Conduct User Testing**: Gather feedback from users to refine the user experience and make necessary adjustments.

## USER EXPERIENCE
Users will begin their journey on a clean homepage displaying a grid of story thumbnails. Each thumbnail is visually distinct and clickable, leading to a dynamic content area where the selected story is presented. Users can easily switch between voice options for narration and enjoy an interactive experience with smooth transitions and engaging visuals. The minimalist design promotes focus on the stories, enhancing overall enjoyment and usability.