Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a highly interactive web app designed for a Computer and Network Engineering (TKJ) class. It serves as a centralized platform for students to manage their academic activities, showcase projects, and foster community interaction. The site combines elements of a dashboard, portfolio, and resource hub, all within a futuristic, tech-driven interface that enhances the learning experience.

## CORE FEATURES
1. **Smart Landing Page**: Engaging animated hero section with a dynamic class tagline and real-time statistics that capture user attention immediately.
2. **Class Overview Dashboard**: Provides a comprehensive overview of class metrics, including student achievements and an activity feed for real-time updates.
3. **Members Management Page**: Allows for easy management and interaction with student profiles, featuring role-based sorting and interactive modals for detailed information.
4. **Projects & Lab Works**: A showcase of student projects with detailed timelines, tech stack badges, and options to like or bookmark projects for easy access.
5. **Learning & Resources Hub**: Centralized repository for downloadable materials and embedded multimedia resources, complete with a search and filter system.
6. **Gallery & Media Center**: A visually appealing gallery with lazy loading and masonry layout for photos and videos, enhancing user engagement with event-based album grouping.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a focus on clean, simple aesthetics, ample white space, and a limited color palette to enhance readability and usability.
- **Color Mode**: Light theme featuring dark text on light backgrounds for improved visual comfort and accessibility.
- **Layout**: A structured grid layout for content organization that allows for easy navigation, with a sidebar for quick access to core features and a top navigation bar for seamless browsing.
- **Typography**: Clean, modern fonts with a clear hierarchy; primary headings in a bold sans-serif font, with body text in a readable serif font for contrast and clarity.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust component structure and type safety.
- **Styling**: Tailwind CSS for utility-first styling and responsive design capabilities.
- **UI Components**: Utilize shadcn/ui for pre-built, customizable components to streamline development.
- **State Management**: Context API or Redux if needed for managing global application state.

## IMPLEMENTATION STEPS
1. **Setup Project Environment**: Initialize a new React project using Vite and install Tailwind CSS and shadcn/ui components.
2. **Create Folder Structure**: Organize components, pages, and assets into a clean directory structure for maintainability.
3. **Develop Core Features**: 
   - Build the Smart Landing Page with animations using libraries like Framer Motion for engaging interactions.
   - Implement the Class Overview Dashboard with responsive cards and dynamic data visualization using chart libraries like Chart.js.
4. **Design Member Management**: Create the Members Management page with a search/filter system using React hooks and conditional rendering.
5. **Build Project Showcase**: Develop the Projects & Lab Works section with category filters and interactive elements for user engagement.
6. **Integrate Learning Hub**: Create the Learning & Resources Hub with embedded viewers for PDFs and videos, ensuring a smooth user experience.
7. **Establish Gallery & Media Center**: Implement the gallery using a masonry layout with lazy loading for optimal performance.
8. **Finalize User Interactions**: Test and refine user flows, ensuring all interactions are intuitive and accessible.

## USER EXPERIENCE
The user experience emphasizes intuitive navigation and engaging interactions. Users can easily switch between sections using the top navigation bar, while quick-access buttons facilitate immediate access to frequently used features. Smooth animations and transitions enhance the overall aesthetic, creating a seamless flow from one page to another. The responsive design ensures optimal usability across devices, fostering a positive learning environment for students.