Design Request: Display Country, State, and City Rank on School Page

[sanaderi]

Create a new Figma design for displaying school ranking information on the school detail page.

The design should clearly and visually highlight the following ranking fields:

• Country Rank`
• State Rank
• City Rank

---

Goals

• Improve visibility of school ranking information
• Create a modern and clean UI presentation
• Ensure rankings are easy to understand on both desktop and mobile devices
• Keep design aligned with current project branding and layout

---

Requirements

• Design placement for:
  • Country Rank
  • State Rank
  • City Rank
• Include responsive/mobile-friendly layout
• Consider using:
  • Cards
  • Badges
  • Ranking icons/trophies
  • Highlight sections

---

Suggested Placement

Potential areas to display rankings:

• Near school title/header
• Inside school statistics section
• Sticky summary/info card

---

Deliverables

• Figma desktop design
• Figma mobile responsive version
• Component states (if applicable)
• Spacing/Typography guidelines

---

Notes

• Rankings should be visually distinguishable from other statistics
• Design should support missing/null values gracefully