Skip to content

[UI] Redesign "Quick Facts About United Kingdom" cards with a modern premium UI #193

Description

@jikrana1

Describe the problem
The "Quick Facts About United Kingdom" section on the UK page currently uses solid dark red (maroon) 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, which makes it disjointed from the modern aesthetics used on the rest of the website.

Expected Behavior
The Quick Facts cards should have a modern, premium appearance similar to the ones updated on the New Zealand page (see Issue #165). They should feel lightweight, visually engaging, and consistent with the design system.

Current Behavior

  • All cards use a heavy, solid dark red background (linear-gradient or background-color).
  • The design looks flat with no drop shadows.
  • Lack of smooth hover animations or interactive effects.
  • The overall visual presentation looks heavy and outdated.

Suggested Improvements
(To match the premium redesign from Issue #165)

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

Acceptance Criteria

  • Cards should have a clean, light/white background instead of a solid dark red.
  • Red accents (like borders or icons) 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