feat(ui): added border on hover on cards for good user interactivity in welcome page

Assigning to upstream maintainers for review.

Overview

Added an hover border effect on Welcome page cards to improve visual interactivity and user feedback. This provides a subtle animation on hover that helps users identify clickable cards using predefined color only.

Preview Output

1. Before [In Dark Theme]:

   

   After [In Dark Theme]

   

2. Before [In Light Theme]

   

   After [In Light Theme]

   

My Motive for update

• Enhances the user experience with a subtle animated border that guides interaction and highlight.
• Uses only the border property, keeping CSS lightweight and performant using predefined color only by Garuda Linux.
• Aligns with Garuda’s modern, dynamic design philosophy.

Implementation Details

• Updated home.component.css with 2 classes -

  .welcome-home-big-card {
      border: 2px solid transparent;
  }
  .welcome-home-big-card:hover{
      border: 2px solid var(--p-primary-hover-color);
  }
  
  .welcome-home-square-card{
      border: 2px solid transparent;
  }
  .welcome-home-square-card:hover {
      border: 2px solid var(--p-primary-color);
  }

• used that css class in home.component.html for scoped into Welcome Home page only

• Fully theme-compatible (var(--p-primary-hover-color/--p-primary-color) used).

• No visual impact on non-hover states. Thats why transparent border used in actual class without hover

Test Result

Environment	Result
macOS + pnpm run dev	Works smoothly
Linux	Works smoothly
Dark / Light themes	Colors consistent

Signed-off-by: Debkanta Mondal (debkantaroni01@gmail.com)