Hostel Issues Category - Copy this React, Tailwind Component to your project
Design a dedicated Hostel Issues Category Page for the User Panel of the "Hostellers Grievance System." This page should allow users to navigate through specific grievance categories related to hostel issues without including a sidebar, navbar, or footer. Layout Details: Page Header: Title: "Hostel Issues" Subtitle: "Select a category to raise your grievance." Add an eye catching graphic or illustration related to hostel living. Category Grid: Use a card based grid layout to display grievance categories. Each card should include: Icon: Representing the category (e.g., a bed for Room issues, a water droplet for Drinking Water). Category Name: Bold, large text (e.g., "Room," "Corridor," "Common Area," "Drinking Water"). Description: Brief description below the category name (e.g., "Report issues with room facilities."). Button: A clear call to action button with the text "Raise a Grievance". When clicked, this should lead to the specific grievance form for that category. Category Cards: Card Design: Ensure cards have a consistent size and design aesthetic. Use rounded corners, subtle shadow effects, and hover effects to enhance interactivity. Categories: Room Description: "Report issues with room facilities." Button: "Raise a Grievance" Corridor Description: "Notify about corridor maintenance issues." Button: "Raise a Grievance" Common Area Description: "Report concerns in shared spaces." Button: "Raise a Grievance" Drinking Water Description: "Report issues related to drinking water supply." Button: "Raise a Grievance" Layout Considerations: Use a responsive grid layout (e.g., 2 4 columns depending on screen size) to ensure the page looks good on both desktop and mobile devices. Include whitespace between cards for better readability and visual appeal. User Experience Enhancements: Hover Effects: Add subtle hover effects on the category cards to indicate interactivity (e.g., changing the card's background color or elevating the card slightly). Confirmation Pop up: When users click the "Raise a Grievance" button, show a confirmation pop up indicating that they are being directed to the grievance form for that category. Back Button: At the top right of the page, include a simple “Back to User Panel” button for easy navigation. UI Style: Color Palette: Utilize soothing colors that reflect a sense of comfort (e.g., soft blues, greens, and whites). Typography: Use clean, modern fonts that are easy to read, with larger headers and smaller body text for descriptions.
