Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a student-centric web application designed to enhance academic and extracurricular management for students. The application will provide a centralized dashboard where users can track attendance, manage schedules, stay updated on notifications, and engage with campus clubs and upcoming events.

## CORE FEATURES
1. **Central Dashboard**: A user-friendly interface that aggregates all essential information, including attendance records and class schedules.
2. **Navigation Menu**: A top-left positioned menu for easy access to different sections of the application such as grades, clubs, events, and notifications.
3. **Notification Center**: Located at the bottom left, this feature will alert users about important updates, deadlines, and messages from instructors or clubs.
4. **Club Information Access**: The top right corner will provide quick links to relevant clubs, allowing students to explore club activities and join or interact as needed.
5. **Upcoming Events Highlight**: A dedicated section in the bottom right corner to showcase upcoming events, making it easy for students to stay informed and engaged with campus life.

## 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 top navigation menu for easy access to different sections, a central dashboard for primary content, and designated areas for notifications and event highlights at the bottom corners.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API (depending on the complexity of state management required)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS, shadcn/ui components, and any necessary state management libraries (e.g., Redux).
3. **Configure Tailwind CSS**: Follow the Tailwind CSS documentation to set up and customize the styling as per the design specifications.
4. **Create the Layout**: Develop the main layout structure, including the navigation menu, dashboard, notification center, and event highlight areas.
5. **Build Core Features**: Implement the central dashboard functionality, including attendance tracking and scheduling features.
6. **Integrate Notification Center**: Create a system for displaying notifications, which could pull from a backend service or static data for the initial setup.
7. **Add Club Information and Events Section**: Develop the components for club information and upcoming events, ensuring they are interactive and user-friendly.
8. **Test the Application**: Conduct thorough testing to ensure all features work as intended, and the application is responsive across devices.
9. **Deploy the Application**: Use a cloud hosting service to deploy the application and make it accessible to users.

## USER EXPERIENCE
1. Students will interact with a clean and intuitive interface that allows them to easily navigate through their academic commitments and extracurricular activities. The dashboard will provide a quick overview of their schedules and notifications, while the navigation menu will facilitate access to various sections. Users will receive timely updates through the notification center and have the ability to explore clubs and events, enhancing their engagement with campus life. The design will ensure that all interactions are seamless and responsive, catering to both desktop and mobile users.`code`