fix: visual enhancements for services and widgets sections

[cybrejon]

Description

Services section

• Fixes misaligned card headings
• Remove translate-y on hover, prevents disruptive motion when trying to access items inside the cards.
• Enhance readability and feedback by reducing border contrast adding hover highlight
• Minor visual improvements

Widgets Section

• Major visual enhancements
• Better responsiveness for forex widget. Use text ellipsis on currency instead of shoving peso equivalent off viewport as it shrinks.
• More visually accessible hotline "chips"

Author Notes

Previously #43

I would like for this PR to serve as a visual reference to what might be BetterGov.ph in terms of visual aesthetic moving forward.

Changes in src/components/ui/Card.tsx might prove controversial as it propagates to the rest of the website, and might introduce a "tolerable" inconsistency. That said, I plan to gradually rectify that by furthering supplementary progress if this gets approved.

Screenshots

[jasontorres]

Thank you for this. I'm liking it so far. The cards on the homepage with its top accent was a bit close to my heart lol because I found the simple border dull and basic. The rest can be consistent cards though.

[cybrejon]

Preciate the input! I'm sure I can bring that border style back somehow. As per the cards, we've had earlier related discussions in #design and would like to expand upon that.

I will likely follow up the discussion with design proposals here after a while. I would love your input on them as well by then.

[cybrejon]

I tried my best to replicate what we currently have. Unfortunately this is the best I can do for the border colors, anymore than this and you risk hurting scannability. Previous changes to these were made in that conscience, multiple boxes stacked in a grid with thick outlines introduce very significant visual noise. The eye is forced to process each individually instead of gliding across text and that is not ideal. Text should always be center-stage, and design is meant to aid in that regard. The cards already have spacing, the borders are redundant.

[cybrejon]

Improved contrast for widgets section. It reverts to the original color scheme basically.

@angelofallars @jasontorres Please let me know what you think when you have the time.

Mobile:

[cybrejon]

Latest enhancement for services section

2025-09-25.00-30-34.mp4

[cybrejon]

Effort on services cards possibly duplicate of #219

Note for maintainers only, as I have discussed this before with #219 author. There is further talk of this on Discord, where it's possible that both of our efforts for this particular feature can become overwritten and thus might require halting further progress until a favorable result has been found.