React/Next Website Visual Refresh
Budget: ₹1,500 – ₹12,500 INR
The existing React + Next.js site functions well, yet the look and feel no longer matches our brand. I need the visual layer completely updated while the underlying codebase and page structure remain intact.
Primary objective: update the visual design—fonts, colour palette, layout rhythm, component styling—so the interface feels fresh, polished, and consistent across desktop and mobile breakpoints.
You will start from the current Git repo, audit the UI, then supply high-fidelity mock-ups (Figma or similar) for approval. Once signed off, translate those designs into reusable React components, integrate them within our Next.js pages, and ensure full responsiveness and accessibility (WCAG AA). Animations or subtle micro-interactions are welcomed as long as performance stays solid.
Key deliverables
• Design files for every public-facing page
• Updated component library (TypeScript, styled-components or Tailwind—open to your preference)
• Refactored Next.js pages using the new styles
• Final build deployed to our staging environment with a clear change-log and rollback instructions
Acceptance criteria
1. All pages load without console errors or Lighthouse performance regressions.
2. Visual parity between approved mock-ups and live build across the latest Chrome, Safari, Edge, and Firefox.
3. Mobile viewport (375 px) renders without horizontal scroll.
4. Accessibility audit score ≥ 90.
The work can begin as soon as you confirm time frames and tool choice. I’ll provide repo access and any brand assets you need.
Primary objective: update the visual design—fonts, colour palette, layout rhythm, component styling—so the interface feels fresh, polished, and consistent across desktop and mobile breakpoints.
You will start from the current Git repo, audit the UI, then supply high-fidelity mock-ups (Figma or similar) for approval. Once signed off, translate those designs into reusable React components, integrate them within our Next.js pages, and ensure full responsiveness and accessibility (WCAG AA). Animations or subtle micro-interactions are welcomed as long as performance stays solid.
Key deliverables
• Design files for every public-facing page
• Updated component library (TypeScript, styled-components or Tailwind—open to your preference)
• Refactored Next.js pages using the new styles
• Final build deployed to our staging environment with a clear change-log and rollback instructions
Acceptance criteria
1. All pages load without console errors or Lighthouse performance regressions.
2. Visual parity between approved mock-ups and live build across the latest Chrome, Safari, Edge, and Firefox.
3. Mobile viewport (375 px) renders without horizontal scroll.
4. Accessibility audit score ≥ 90.
The work can begin as soon as you confirm time frames and tool choice. I’ll provide repo access and any brand assets you need.
Related categories:
Website Design
HTML5
Shopify Templates
Shopify
React.js
WooCommerce
Web Development
Shopify Development
Figma
Next.js