🚀 Convert UI from static HTML to .tsx Pages & Complete the UI for all currently planned pages along with complete navigation.

[saad2134]

Convert Static HTML UI to .tsx Pages and Complete Full UI

Description

Currently, the project UI exists in static HTML/CSS form for planned pages. The goal of this issue is to:

1. Convert all static HTML pages into React .tsx components/pages

   • Ensure all page layouts, components, and styling are preserved.
   • Structure pages according to the Next.js / React project architecture.

2. Complete the UI for all currently planned pages

   • Implement missing sections, components, and functionality in the UI.
   • Ensure that all pages are consistent in terms of layout, spacing, and design.

3. Implement complete navigation

   • Add header, sidebar, and role-based navigation for Patients, Donors, Hospitals, and Organizations.
   • Ensure smooth navigation between pages using Next.js routing or React Router.

4. Add theme switching functionality

   • Enable system/light/dark mode throughout the application.
   • Ensure theme is persistent across page reloads (localStorage).
   • Default is system.

Acceptance Criteria

• All planned pages are converted to .tsx components properly.
• Navigation is implemented and working correctly for all roles.
• Theme switching works seamlessly across all pages.
• UI matches the designed mockups/screenshots, including responsiveness.
• No static HTML files remain in the project.

Notes

• Follow component reusability practices to avoid duplication.
• Use CSS-in-JS (e.g., Tailwind, styled-components) or the existing styling system.
• Make sure all links, buttons, and interactive elements are functional in the prototype.