Design and build a Student Management System* for an international school using Next.js and shadcn/ui, focusing primarily on an intuitive and modern UI/UX. Prioritize creating a clean, visually appealing, and responsive user interface. Key features can be hardcoded for simplicity, emphasizing the design and user flow.

UI/UX Design Requirements:

1. Overall Aesthetic

   • Use shadcn/ui components for a professional, accessible, and cohesive design language.
   • Follow modern design principles: minimalism, clean typography, and ample whitespace.
   • Provide both dark mode and light mode options with a toggle switch.
   • Implement a responsive layout for seamless usability on mobile, tablet, and desktop devices.

2. Dashboard

   • Create role-based dashboards for Admin, Teacher, Parent, and Student.
   • Include visually appealing widgets (e.g., card components for quick stats).
   • Focus on clean navigation, with icons and labels for intuitive access to different sections.
   • Add a vertical sidebar with collapsible menus.

3. Navigation

   • Use a sticky top navigation bar with a search bar, profile menu, and notifications icon.
   • Implement a breadcrumb navigation system for better context in nested pages.

4. Form Design

   • Create polished form components for inputting data, with real-time validation.
   • Add placeholders, tooltips, and error states for better form usability.
   • Use multi-step forms for complex processes like student registration or fee payments.

5. Tables and Data Display

   • Design interactive, paginated tables for listing students, teachers, and attendance.
   • Add sorting, filtering, and search functionality for tables.
   • Provide expandable rows or modals to view detailed information.

6. Notifications and Alerts

   • Design toast notifications for system updates (e.g., "Attendance marked successfully").
   • Add banners or modals for critical alerts, such as fee payment deadlines.

7. User Feedback

   • Include visual cues like hover states, loading spinners, and success/failure icons.
   • Add skeleton loaders for data-fetching states to improve perceived performance.

8. Accessibility

   • Ensure full keyboard navigation support.
   • Design with WCAG guidelines for color contrast and text readability.
   • Include ARIA labels for all interactive elements.

9. Pages to Build (With Hardcoded Features)

   • Login Page: Clean, single-column layout with brand logo and form inputs.
   • Dashboard: Hardcode sample widgets like "Total Students," "Upcoming Exams," and "Messages."
   • Student List Page: Paginated table with hardcoded student data.
   • Attendance Page: Basic table with pre-filled attendance data.
   • Fee Management: Example page with hardcoded fee summary cards.
   • Profile Page: A template for user details, showing hardcoded data.