Create a professional and responsive "Resources" page for SEME TVC ICT Portal using HTML, TailwindCSS, and JavaScript for basic interactivity. The page should allow users to upload and browse study materials such as notes, past papers, and guides. Resources should be organized by **Class (e.g., ICT6 J24)** and **Module (e.g., Module I, Module II)**. **Page Structure:** 1. **Header** - Logo and navigation bar (Home, Courses, Resources, Contact). - Sticky on scroll and responsive. 2. **Hero Section** - Title: "Study Resources" - Subtitle: "Upload and Access Notes, Past Papers, and Learning Materials" - Minimal, clean design with Tailwind typography utilities. 3. **Upload Section** - Card with a form for uploading resources. - Fields: - Resource Title - File Upload (PDF, DOC, ZIP allowed) - Select Class (Dropdown: e.g., ICT6 J24, ICT5 J23) - Select Module (Dropdown: Module I, Module II, etc.) - Resource Type (Dropdown: Notes, Past Papers, Guides) - Submit button styled with Tailwind gradient. - Show success message after upload. - (Optional) Drag-and-drop file upload with a preview. 4. **Resource Filters** - Search bar for keywords. - Dropdown filters: - By Class (ICT6 J24, ICT5 J23, etc.) - By Module (Module I, II, III) - By Type (Notes, Past Papers) - Tailwind-styled filter panel at the top of the resources grid. 5. **Resources Display Grid** - Display uploaded resources in cards. - Each card includes: - Resource Title - Type (Badge) - Class & Module info - Download/View button - Responsive grid (3 columns on desktop, 1 column on mobile). 6. **Footer** - Quick links, contact info, and social media icons. **Design Requirements:** - Use TailwindCSS for layout, colors, and responsiveness. - Mobile-first design. - Apply hover effects and smooth transitions. - Use Tailwind gradient colors (blue to purple) for buttons. - Include basic JavaScript to handle: - Dynamic filtering by class, module, and type. - Displaying uploaded files (simulation if backend is not included). - Initial Deployment
ed4037e
verified