Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is an **interactive 3D web application** where users can explore space components such as rockets, rovers, and satellites. Users can click on various parts to receive layman-friendly explanations, making complex space terminology accessible and engaging.

## CORE FEATURES
1. **3D Viewport**: A central interactive area that displays a rotatable and zoomable 3D model of rockets, rovers, and satellites. Users can click on components to view detailed information.
2. **Info Panel**: A sidebar that presents the component name, layman explanation, technical details, common misconceptions, and engaging facts.
3. **Navigation Tabs**: Easily switch between different categories (Rockets, Rovers, Satellites, Ground Infrastructure) to explore specific components.
4. **Interactive Animations**: Optional animations that illustrate component operations, such as engine ignition and fuel flow, enhancing the user experience.
5. **Size Comparisons**: Visual overlays that help users understand the scale of space components in relation to each other.
6. **Misconceptions Addressing**: Clear explanations that correct common misconceptions about space technology.

## 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**: A central 3D viewport occupies 70% of the screen, with a right sidebar for information and a top navigation bar for category switching.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Zustand for state management of component interactions and information display.

## IMPLEMENTATION STEPS
1. **Set Up Project**: 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 component needs.
3. **Create 3D Viewport**: Implement the 3D canvas using Three.js, allowing for model loading, rotation, and zoom functionalities.
4. **Develop Info Panel**: Create a sidebar component that displays information based on the selected 3D model component, utilizing state management to update the content dynamically.
5. **Implement Navigation Tabs**: Add a tabbed interface at the top of the application for switching between different categories of space components.
6. **Integrate Animations**: Use CSS animations and Three.js capabilities to add interactive animations for components.
7. **Design Layout**: Structure the application layout using Tailwind CSS to ensure responsiveness and adherence to the specified design principles.
8. **User Testing**: Conduct usability testing to gather feedback on user interactions and adjust the application as necessary.

## USER EXPERIENCE
Users will land on a visually appealing interface with a 3D model prominently displayed. They can interact with the model by clicking on various components to learn about their functions. The sidebar will update in real-time to provide explanations, while the navigation allows users to explore different categories seamlessly. Interactive elements will provide a sense of engagement, and users will be able to toggle animations on and off based on their preferences. The overall experience aims to inspire curiosity about space without overwhelming users with complex jargon.