Embed Themeforest Template into 2 pages on Existing Web App
Budget: £10 – £15 GBP
Summary
Design Requirement: Metronic UI Upgrade for Dashboard & Login (Live Logic Already Wired)
Upgrade the visual design of the /dashboard and /login pages to Metronic Tailwind Demo 1 standards, using all existing backend data logic as-is. This is a UI/UX refactor only. No changes to any stats or logs fetching, user auth logic, or other functional code.
Pages to Update: /dashboard AND /login
Dashboard Page:
1 . UI Refactor Only
- Wrap and restyle all current stat cards and log widgets using Metronic Demo 1 components.
- Do not change or break any data fetching or logic; all dynamic content should still flow from existing code.
- Use the Metronic Demo 1 Dashboard as your layout/style reference.
Component Mapping:
2. Replace dev/stub visuals for:
- Stat cards (external users, policies, user groups, etc.)
- Recent activity/logs table (with color/status highlighting)
- Sidebar and topbar should match Metronic structure and grouping.
Left: Static App dropdown (UI only, per demo)
Right: Avatar dropdown with Profile, Settings, Logout (UI only, per demo)
Login Page:
1. UI Refactor Only
- Redesign using Metronic’s login/auth component layout (centered form, clean Metronic styling).
- Do not alter any login logic or API calls; simply restyle existing functionality.
- Place Zubbl logo or app name above the form for branding.
2. UX Details
- Preserve current error and loading behaviors, but render them with Metronic styling.
- Ensure inputs, buttons, and focus states follow Metronic’s accessibility standards.
- Responsiveness
- The login page must be clean and functional on all device sizes.
General Notes:
Do not break or alter existing API calls, data hooks, or business logic.
This is a visual/design upgrade only.
Acceptance Criteria:
Both pages match the Metronic Demo 1 style, layout, and interactions.
All existing live data and functionality remain intact.
No regressions in data loading, error handling, or user flows.
UI is modern, consistent, responsive, and accessible.
Design Requirement: Metronic UI Upgrade for Dashboard & Login (Live Logic Already Wired)
Upgrade the visual design of the /dashboard and /login pages to Metronic Tailwind Demo 1 standards, using all existing backend data logic as-is. This is a UI/UX refactor only. No changes to any stats or logs fetching, user auth logic, or other functional code.
Pages to Update: /dashboard AND /login
Dashboard Page:
1 . UI Refactor Only
- Wrap and restyle all current stat cards and log widgets using Metronic Demo 1 components.
- Do not change or break any data fetching or logic; all dynamic content should still flow from existing code.
- Use the Metronic Demo 1 Dashboard as your layout/style reference.
Component Mapping:
2. Replace dev/stub visuals for:
- Stat cards (external users, policies, user groups, etc.)
- Recent activity/logs table (with color/status highlighting)
- Sidebar and topbar should match Metronic structure and grouping.
Left: Static App dropdown (UI only, per demo)
Right: Avatar dropdown with Profile, Settings, Logout (UI only, per demo)
Login Page:
1. UI Refactor Only
- Redesign using Metronic’s login/auth component layout (centered form, clean Metronic styling).
- Do not alter any login logic or API calls; simply restyle existing functionality.
- Place Zubbl logo or app name above the form for branding.
2. UX Details
- Preserve current error and loading behaviors, but render them with Metronic styling.
- Ensure inputs, buttons, and focus states follow Metronic’s accessibility standards.
- Responsiveness
- The login page must be clean and functional on all device sizes.
General Notes:
Do not break or alter existing API calls, data hooks, or business logic.
This is a visual/design upgrade only.
Acceptance Criteria:
Both pages match the Metronic Demo 1 style, layout, and interactions.
All existing live data and functionality remain intact.
No regressions in data loading, error handling, or user flows.
UI is modern, consistent, responsive, and accessible.