Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application featuring a humorous narrative where a male Spartan soldier is in desperate need of a restroom and searches for a suitable place to relieve himself. The application focuses on engaging storytelling combined with a minimalist design, aiming to entertain users while providing a light-hearted experience.

## CORE FEATURES
1. **Interactive Storyline**: Users can navigate through a series of comic-style panels that depict the Spartan's journey to find a restroom, with humorous dialogues and scenarios.
2. **Choice-Based Navigation**: Users make choices that affect the storyline, leading to different outcomes and humorous situations.
3. **Visual Illustrations**: Each section features engaging illustrations that enhance the storytelling experience.
4. **Character Development**: Users can learn more about the Spartan character through brief backgrounds and funny anecdotes.
5. **Share Feature**: Users can share their unique story outcomes on social media, encouraging virality and engagement.
6. **Feedback System**: A simple feedback system allows users to rate their experience and share their thoughts on the narrative.

## 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 will include a hero section at the top, followed by interactive panels for storytelling, a footer with navigation links, and a share button prominently displayed.

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

## IMPLEMENTATION STEPS
1. **Set up the React environment**:
   - Create a new React project using Create React App with TypeScript.
   - Install necessary dependencies: React Router for navigation, Tailwind CSS for styling, and shadcn/ui for UI components.
   
2. **Design the Layout**:
   - Create a basic layout structure with a hero section, content area for the story, and a footer.
   - Implement Tailwind CSS classes to achieve the minimalist design, ensuring ample white space and clear typography.
   
3. **Develop Core Features**:
   - Implement the interactive storyline using React components for each panel.
   - Create a choice-based navigation system, allowing users to make selections that lead to different story branches.
   - Integrate visual illustrations corresponding to each part of the story.
   
4. **Add Share and Feedback Features**:
   - Implement social media sharing options using a library like react-share.
   - Create a simple feedback form where users can submit their ratings and comments.

5. **Test and Optimize**:
   - Conduct user testing to ensure a smooth experience and gather feedback.
   - Optimize the application for speed and responsiveness across devices.

## USER EXPERIENCE
Users will start at the hero section, which introduces the Spartan soldier's predicament. As they navigate through the story, they will be prompted to make choices that change the narrative direction. The minimalist design will keep the focus on the storyline and illustrations, enhancing engagement. The share feature will allow users to easily tell their friends about their unique experiences, while the feedback system will gather insights for future improvements. The overall experience will be light-hearted and entertaining, with an emphasis on humor and interaction.