Enhance logo interactivity on login page

[HVbajoria]

Description

Enhanced the Paisable logo on the login page with intuitive hover effects to clearly indicate it's clickable and navigates back to the homepage. Added scale, glow, and color transition effects for better user experience.

Related Issue

Fixes #102

Motivation and Context

The logo was already functional for navigation but lacked visual feedback. This enhancement makes the navigation more discoverable and intuitive without adding extra UI elements.

Types of Changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Enhancement (improvement to an existing feature)
• Breaking change (fix or feature that would cause existing functionality to change)
• Test (adds or updates tests only)
• Documentation (non-code change)

How Has This Been Tested?

• Manually tested hover effects in both light and dark modes
• Verified smooth transitions and scaling behavior
• Confirmed navigation functionality remains intact
• Tested on different screen sizes for responsiveness

Screenshots (if applicable):

Screen.Recording.2025-10-08.at.11.44.42.PM.mov

Checklist

• My code follows the code style of this project
• My change requires a change to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

[netlify]

✅ Deploy Preview for paisable ready!

Name	Link
🔨 Latest commit	9b64a9c
🔍 Latest deploy log	https://app.netlify.com/projects/paisable/deploys/68e7d8b3ccb0cd00088c23c6
😎 Deploy Preview	https://deploy-preview-103--paisable.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 94 Accessibility: 100 Best Practices: 100 SEO: 91 PWA: 80 View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[HVbajoria]

Hi @archa8 ,

Created a PR as discussed.

Could you please check once?

Thanks!

[archa8]

Looks good! However, it would look better with transition-duration-500 and kindly do the same thing for the sign up page too. Also, it would be awesome if you could add a tooltip text on hover.

[HVbajoria]

Hi @archa8 ,

Changes Made:

1. Login Page ✅

• Updated transition duration to duration-500
• Added tooltip title="Go to home"

2. Signup Page ✅

• Added complete hover effects: transition-all duration-500 hover:scale-105 hover:drop-shadow-lg hover:text-blue-500 dark:hover:text-blue-300 cursor-pointer
• Added tooltip title="Go to home"

3. Navbar (Layout.jsx) ✅

• Added complete hover effects to the Paisable logo
• Added tooltip title="Go to home"
• Used duration-500 for consistent timing

Effects Applied:

• Scale: Logo grows to 105% on hover
• Glow: Drop shadow appears on hover
• Color transition: Subtle color shift for interactivity
• Duration: 500ms smooth transitions
• Tooltip: "Go to home" appears on hover
• Dark mode support: Different hover colors for light/dark themes

[archa8]

LGTM!