Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed for an army-related task, featuring multiple form-filling screens with a user-friendly interface. Users will navigate through 9-10 different screens using a left navigation bar, each containing various modules to fill out forms efficiently. The application will incorporate aesthetic elements related to the Indian army, enhancing the overall visual experience while maintaining functionality.

## CORE FEATURES
1. **Multi-Screen Navigation**: A left sidebar that allows users to switch seamlessly between 9-10 different form-filling screens.
2. **Module Toggle**: A top navigation bar with toggle buttons that enable users to switch between 2-3 modules within each screen.
3. **Session Timeout Timer**: A visible countdown timer in the navigation bar indicating a 10-minute session timeout.
4. **Form Filling Interface**: A central area for users to fill out forms, complete with buttons for search, save, print, and additional actions.
5. **Dynamic Design Elements**: Background animations and designs, such as a flowing Indian flag or Ashoka Chakra, to create an engaging and thematic user experience.
6. **Aesthetic Buttons and UI**: Stylish buttons and UI components that enhance the visual appeal, ensuring a modern and clean interface.

## 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 layout consists of a left sidebar for navigation, a top navigation bar for module selection and session timer, and a central main area for form filling with aesthetic backgrounds and dynamic elements.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use React's Context API if needed for shared state across components.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (Tailwind CSS, shadcn/ui).
2. **Create Layout Components**: Develop the main layout with a left sidebar, top navigation bar, and central content area.
3. **Implement Navigation**: Create the left navigation bar to switch between screens and the top bar for toggling modules.
4. **Design Form Screens**: Design each of the 9-10 screens with form components, applying the specified aesthetic elements and backgrounds.
5. **Add Session Timeout Logic**: Implement a session timeout timer that alerts users when their session is about to expire.
6. **Styling and Responsiveness**: Utilize Tailwind CSS to style components according to the design specifications and ensure responsiveness across devices.

## USER EXPERIENCE
Users will interact with the application by selecting different screens from the left navigation bar, toggling between modules at the top, and filling out forms in the main area. The aesthetic elements, such as flowing backgrounds and themed buttons, will create an engaging experience. Clear calls to action, like search, save, and print buttons, will be easily accessible, ensuring a smooth workflow. The session timeout feature will remind users of their active session, enhancing usability while maintaining security.