Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to serve as a dashboard for Interact Club District 9112. It will facilitate user interactions, project management, and event organization through an intuitive interface. The application will provide a secure login system, a rich feature set for both users and administrators, and an AI component for enhanced user engagement.

## CORE FEATURES
1. **User Authentication**: Users can log in with a valid email and password. Secure password management ensures user data integrity.
2. **Dashboard Navigation**: A central dashboard that provides easy access to various sections including Projects, Events, Gallery, Notifications, Suggestion Board, and the Admin Panel.
3. **Admin Panel**: Restricted access for admins to create, edit, and manage projects, events, gallery items, and notifications. Access requires a passkey ("interactadmin").
4. **Profile Management**: Users can edit and upload their profiles, ensuring their information is current and accurate.
5. **AI Interface**: An interactive AI icon that, when clicked, opens a responsive AI interface for users to ask questions and receive real-time answers related to the Interact community.
6. **Notification System**: A robust notifications feature to keep users informed about updates, events, and important announcements.

## 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 responsive grid layout that adapts to various screen sizes, with a sidebar for navigation and a main content area for displaying information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Redux (if needed for complex state management)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (Tailwind CSS, shadcn/ui).
2. **User Authentication**: Implement a secure login page and authentication flow using React Context API.
3. **Dashboard Structure**: Create the main dashboard layout with sidebar navigation using Tailwind CSS for styling.
4. **Admin Panel**: Develop the Admin Panel with access control and functionality for managing projects, events, and gallery items.
5. **Profile Management**: Build a user profile management interface allowing users to edit and upload their profiles.
6. **AI Interface Integration**: Incorporate an AI component that provides a responsive question-and-answer interface for users.
7. **Notification System**: Implement a notifications feature to alert users of important updates and announcements.

## USER EXPERIENCE
Users will first interact with the login screen, entering their credentials to access the dashboard. Upon successful login, they will be greeted with an overview of their activities and available sections. The sidebar navigation will enable easy access to Projects, Events, and other features. Users can seamlessly interact with the AI icon for assistance and manage their profiles effortlessly. Admins will have specialized access to the Admin Panel, ensuring that they can manage content while maintaining security through the passkey system. The entire application will prioritize user experience with responsive design to ensure usability across devices.