I'll convert this Smart Campus HTML application into a modern Next.js React app with proper components and styling. Let me first generate some design inspiration to make this look polished.

Now I'll build the Smart Campus app with a modern, clean design. Let me update the theme and create the components.

Now let me create the main Smart Campus application:

I've converted your Smart Campus HTML application into a modern Next.js React app with the following features:

Features implemented:

1. Login Page - Students enter their ID and name to access the system
2. Home Dashboard - Real-time density status for Study Area, Cafeteria, Parking, and Lift with color-coded indicators (green/yellow/red)
3. Reserve Page - Book spaces with a 5-minute auto-expiry timer and countdown display
4. Map View - Visual grid showing campus zones with density levels
5. Swap Page - Post exchange requests to swap spots with other students
6. Graph Page - Bar chart visualization of density data using Recharts with summary statistics

Design improvements:

• Modern purple/lavender theme matching the original design
• Status colors (green for available, amber for moderate, red for crowded)
• Responsive mobile-first layout with fixed bottom navigation
• Cards with left-border indicators showing status
• Smooth transitions and hover effects
• Thai language support throughout the UI