Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a comprehensive Faculty Management Portal Website designed for faculty users within an educational institution. It will provide a modern, interactive dashboard with static demo data, showcasing functionalities such as scheduling, live class tracking, and analytics, all while ensuring a premium UI/UX experience.

## CORE FEATURES
1. **Static Login System**: A demo login interface using static credentials with options for email and phone authentication, featuring a "Remember Me" checkbox and a "Forgot Password" UI.
2. **Faculty Dashboard**: A polished dashboard with overview cards displaying total classes, upcoming slots, active classes, and attendance rates.
3. **Today’s Schedule**: A detailed schedule section displaying faculty classes with subject details, timings, and status badges, populated with realistic mock data.
4. **Live Slot Tracking**: An interactive section for managing live classes with start/stop buttons and timers to track teaching durations.
5. **Analytics Section**: Beautifully designed charts illustrating teaching hours, completed classes, and attendance performance using static data.
6. **Account Settings Page**: A section for managing faculty profiles, including options for updating personal information and changing passwords.

## 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 will feature a sidebar navigation for easy access to different sections, a top navbar for user actions, and responsive design to ensure usability across devices.

## TECHNICAL REQUIREMENTS
- **Framework**: React with JavaScript only (no TypeScript)
- **Styling**: Tailwind CSS for styling components
- **UI Components**: Utilization of Framer Motion for animations and Recharts or Chart.js for data visualization
- **State Management**: React's built-in state management and hooks for dynamic content handling

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Vite and install necessary dependencies (Tailwind CSS, Framer Motion, Recharts/Chart.js).
2. **Create Static Data**: Define static mock data for faculty profiles, schedules, analytics, and notifications to ensure all sections are populated.
3. **Build Authentication Logic**: Implement the static login functionality with local storage or mock JWT token for session management.
4. **Develop Dashboard Components**: Create components for the dashboard, including overview cards, schedules, live tracking, and analytics charts.
5. **Implement UI/UX Features**: Use Tailwind CSS to style components according to minimalist design principles, incorporating smooth animations with Framer Motion.
6. **Ensure Responsiveness**: Test the application across various devices to ensure a consistent user experience and adjust styles as necessary.

## USER EXPERIENCE
The application will provide an intuitive and engaging user experience, allowing faculty members to easily navigate through their schedules, track live classes, and view analytics. The use of animations and polished UI elements will enhance interaction, while the static data will give a realistic feel of a fully functional system, making it ideal for demonstrations and presentations.