Skip to content

[UI] Redesign "Quick Facts About New Zealand" cards with a modern premium UI #210

Description

@jikrana1

Describe the problem
The "Quick Facts About New Zealand" section on the New Zealand page currently uses solid dark red cards with white text and icons. While the content is readable, the overall design looks very heavy, flat, and outdated. It lacks visual hierarchy, depth, and a premium feel. This is the exact same UI issue previously addressed for the UK page (Issue #193) and the Canada page.

Expected Behavior
The Quick Facts cards should have a modern, premium appearance. They should feel lightweight, visually engaging, and consistent with the modern design system.

Current Behavior

  • All cards use a heavy, solid dark red background (linear-gradient).
  • The design looks flat with no subtle interactive hover effects.
  • The visual presentation feels disjointed from the premium UI standards.

Suggested Improvements
(To match the premium redesign applied to UK and Canada)

  • Replace the solid red background with a clean white/light background (e.g., var(--bg-card)).
  • Add red accent elements (such as a 3px top border or a dynamic red icon container) instead of a solid red block.
  • Add soft, premium box shadows (box-shadow) to create depth.
  • Improve icon container styling (subtle red tint background turning fully red on hover).
  • Add smooth hover animations (like a translateY(-8px) lift effect).
  • Ensure text and icons are perfectly visible and centered.

Acceptance Criteria

  • Cards should have a clean, light/white background instead of a solid dark red.
  • A subtle red accent (like a top border) should be used to maintain brand identity.
  • Cards should have a premium, soft shadow for depth.
  • Hovering over a card should trigger a smooth lift and shadow animation.
  • Typography and icons must be perfectly visible and centered.
  • Must be responsive on desktop, tablet, and mobile.

Screenshot

Image

Metadata

Metadata

Assignees

Labels

SSoC26Program label for Social Summer of Code Season 5.

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions