feat: reduce visual noise in service cards by removing unnecessary icons

[Justin322322]

feat(ui): reduce visual noise in service cards by removing unnecessary icons

Summary

• Reduced visual noise in government service cards to create a cleaner, more professional appearance appropriate for government websites.
• Removed distracting icons and simplified interactions to prioritize content clarity and functionality.
• Improved accessibility and user experience by focusing on typography and content hierarchy over visual flourishes.

Before

The service cards had multiple visual distractions that competed for user attention:

After

Desktop

Mobile

Tablet

Changes

• Component: src/components/home/ServicesSection.tsx

  • Removed: Lucide icon imports and icon mapping functions
  • Improved: Typography with larger headings and better spacing
  • Enhanced: Grid layout (3 columns instead of 4) for better readability

• Component: src/components/ui/Card.tsx

  • Updated: Hover effects from dramatic transforms to subtle border/color changes
  • Improved: Card footer styling with lighter background (bg-gray-50/30)
  • Enhanced: Professional government-appropriate appearance

Rationale

• Government website standards: Reduce visual distractions to help citizens find services efficiently
• Accessibility: Improve focus on content rather than decorative elements
• User experience: Create cleaner interface that prioritizes functionality over aesthetics
• Professional appearance: Align with government website best practices for clarity
• Content hierarchy: Use typography and spacing instead of icons to organize information

Testing

• All service cards display correctly with new styling
• Navigation links function properly
• Responsive design maintained across different screen sizes
• Accessibility features preserved (keyboard navigation, ARIA labels)

Risks / Rollback

• Low: Changes are primarily cosmetic styling improvements
• Rollback: Revert ServicesSection.tsx and Card.tsx to previous versions
• No breaking changes: All functionality remains intact

Checklist

• Conventional commit message
• Branch created from latest main
• Responsive design maintained
• Accessibility: proper focus states and ARIA labels preserved
• No breaking changes to existing functionality
• Cross-browser compatibility maintained
• Performance: no impact on loading or rendering
• Government-appropriate styling implemented
• Visual noise reduction achieved
• Content hierarchy improved with typography and spacing

---

Related Issue: Fixes #246 - [IDEA] Reduce usage of unnecessary icons

This change aligns with the principle that government websites should prioritize clarity and functionality over visual flourishes, making it easier for citizens to find the services they need without distractions.

Fixes #246 - only this section (keep #246 open)

[codegino]

@Justin322322
Thanks for fixing the issue I created.

However, in the solution, the card header is doing the same as the icons, it's grabbing too much attention

The View all <service name> actions are too repetitive, I was thinking of adding a View all link with a subtle icon color at the same level as the card title.

Also, too much gap between lists.

My feedbacks might be subjective and could make the design worse, so try to get more from the design channel

[Justin322322]

We can consult this with UX experts

[cybrejon]

Marked duplicate of #148 and #219.

[Justin322322]

how about this one @codegino

the header, and +more services is clickable

Desktop

Mobile

Tablet

[codegino]

@Justin322322 thanks for the changes

Aside from color choices, I like this a lot better. If not for the duplicate PR(and waiting for more design inputs), I would have already merged this.

Just a subjective note. If I would choose a color, it should make the eyes automatically flow like "Card Title" -> "Card Description" -> "More Actions"

Currently it is "Card Title" -> "More Actions" -> "Description"

[KishonShrill]

@Justin322322 any updates on this enhancement?