[UI/UX] Build Repair Specialist Public Profile Page (Desktop & Mobile)

[Rampop01]

Issue #66

[UI/UX] Build Repair Specialist Public Profile Page (Desktop & Mobile)

🟡 Priority: High
Difficulty: Medium
Estimated Effort: 3 days
Relevant Files: src/app/technician/[id]/page.tsx, src/components/technician/TechnicianHeader.tsx, src/components/technician/ReviewsFeed.tsx, src/components/technician/RepairQuoteModal.tsx
Labels: ui, repair, priority:high, figma

Requirements

1. Profile Architecture

   • Implement the dynamic route /technician/[wallet_id] page from Figma.
   • Render: Technician Name, Location, 'Verified Professional' badge (if is_verified), aggregate 0-100 Trust Score gauge chart, and specialties tags.
   • Render a highly polished, paginated list of reviews from past customers, each showing: device repaired, star rating, textual feedback, and a 'Verified Transaction' checkmark.
   • A prominent sticky CTA button 'Request Repair Quote' must remain visible as the user scrolls and open the multi-step quote modal on click.

2. Screenshot Requirement

   • Capture and commit screenshots of the Desktop Technician Profile with a fully populated profile (name, reviews, badges, trust score gauge).
   • Include a Mobile screenshot showing the collapsed layout with the sticky CTA visible.
   • Place screenshots in src/components/technician/screenshots/.

3. Testing Requirements

   • Unit test: Render the profile with a mocked technician object where is_verified = false and assert the 'Verified Professional' badge is NOT rendered.
   • Accessibility audit: Ensure the multi-step quote modal can be navigated by keyboard and focus is trapped correctly.

---