Enhance UI hover effects for navbar, footer links, and CTA button#6450
Enhance UI hover effects for navbar, footer links, and CTA button#6450compwron merged 3 commits intorubyforgood:mainfrom
Conversation
|
Hi @compwron , @FireLemons , and @elasticspoon 👋 I’ve submitted a small UI enhancement PR that improves hover interactions for better user experience (Resolves #6440). Thank you! 😊 |
There was a problem hiding this comment.
Pull Request Overview
Enhance UI interactivity and visual feedback by adding hover and transition effects to key elements.
- Added hover underline, color, and opacity feedback to navbar links
- Enhanced the “Get In Touch” button with transform-based hover transitions
- Updated footer links and email link with underline, color change, and transition effects
app/views/static/index.html.erb
Outdated
| <a class="hidden md:block hover:underline hover:decoration-blue-300 hover:opacity-90" href="#about">About</a> | ||
| <a class="hidden md:block hover:underline hover:decoration-blue-300 hover:opacity-90" href="#testimonials">Testimonials</a> | ||
| <a class="hidden md:block hover:underline hover:decoration-blue-300 hover:opacity-90" href="#contact">Contact</a> |
There was a problem hiding this comment.
[nitpick] The same hover and transition classes are repeated across navbar and footer links; consider extracting them into a shared utility or component to reduce duplication.
| <a class="hidden md:block hover:underline hover:decoration-blue-300 hover:opacity-90" href="#about">About</a> | |
| <a class="hidden md:block hover:underline hover:decoration-blue-300 hover:opacity-90" href="#testimonials">Testimonials</a> | |
| <a class="hidden md:block hover:underline hover:decoration-blue-300 hover:opacity-90" href="#contact">Contact</a> | |
| <a class="hidden md:block hover-link" href="#about">About</a> | |
| <a class="hidden md:block hover-link" href="#testimonials">Testimonials</a> | |
| <a class="hidden md:block hover-link" href="#contact">Contact</a> |
|
I am not convinced that we want to merge this. Later I will look at the UI locally and see whether it seems more plausible than it looks from here. |
|
Sure @compwron, |
|
Sure @compwron, |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
I applied some fixes and will open a follow-up PR for any changes that seem needed. |
|
@compwron |
What GitHub issue is this PR for, if any?
Resolves #6440
What changed, and why?
This PR introduces subtle but effective UI enhancements to improve interactivity, visual feedback, and trustworthiness for users — especially first-time visitors and potential contributors.
✅ Changes made:
🔶 "Get In Touch" Button:
-> Added hover effects: background color transition, upward shift (-translate-y-0.5), and horizontal scale (scale-x-110)
-> Added will-change-transform and smooth transitions to improve responsiveness
🔶 Navbar Links (About, Testimonials, Contact):
-> Added hover:underline, hover:decoration-blue-300, and hover:opacity-90
-> Improves clarity, consistency, and feedback on navigation
🔶 Footer Links:
-> Updated "Ruby for Good" and "Storyset" links:
-> Added hover:underline and transition duration-100
-> Enhances accessibility and user confidence
🔶 Footer Email Link (casa@rubyforgood.org):
-> Added hover:underline, hover:text-green-300, and transition duration-100
-> Indicates it's a trustworthy and interactive email link
These small enhancements improve the site's polish and usability without altering layout or backend logic.
🔷How is this tested? (please write rspec and jest tests!) 💖
-> Manually tested across major browsers and screen sizes
-> Verified all hover effects work consistently and as intended
-> No layout regressions or accessibility issues found
Since this is a CSS-only change, no RSpec or Jest tests are required
Screenshots please :)
🔹 Navbar Hover Links
🔹 Footer Email & Links
🔹 "Get in Touch" Button
(just for a smile 😄)
Warning: May cause uncontrollable grinning and instant approval 😎💚
Small polish, big impact! ✨
"Fixed a footer link and walked away like this."
~Thank you for your time and consideration! 😊
Excited to contribute and always open to feedback.