yovinchen/claudia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): enhance card hover effects with trailing border animation and fix symbol alignment

Browse Source 
- Add trailing border effect to agent and project cards with animated conic gradient
- Fix rotating symbol vertical alignment from text-bottom to middle with position offset
- Implement CSS custom properties for smooth border animation on hover
- Maintain consistent styling across shimmer.css and styles.css files
This commit is contained in:
Mufeed VH
2025-07-04 18:45:46 +05:30
parent 9b4777978e
commit 9eeb336a8b
3 changed files with 64 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@@ -185,7 +185,7 @@ function App() {
transition={{ duration: 0.5, delay: 0.1 }}
>
<Card
className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 shimmer-hover"
className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 shimmer-hover trailing-border"
onClick={() => handleViewChange("agents")}
>
<div className="h-full flex flex-col items-center justify-center p-8">
@@ -202,7 +202,7 @@ function App() {
transition={{ duration: 0.5, delay: 0.2 }}
>
<Card
className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 shimmer-hover"
className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 shimmer-hover trailing-border"
onClick={() => handleViewChange("projects")}
>
<div className="h-full flex flex-col items-center justify-center p-8">