averyfelts/Stop_smoking_website_ver2
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: fix hover state to use full-card gradient instead of clipped corner

Browse Source
This commit is contained in:
Avery Felts 2026-01-27 09:00:53 -07:00
parent 9ed0bfb81d
commit 211d388017
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/smoking-aids/page.tsx
View File

@ -95,11 +95,11 @@ export default function SmokingAidsPage() {
className="group animate-in fade-in slide-in-from-bottom-12 fill-mode-both"
style={{ animationDelay: `${index * 150}ms` }}
>
<Card className="h-full flex flex-col overflow-hidden border-border/40 hover:border-border/80 transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 bg-card/30 backdrop-blur-xl relative">
{/* Decorative gradient blob */}
<div className={`absolute -top-24 -right-24 w-48 h-48 rounded-full blur-3xl opacity-20 transition-opacity duration-500 group-hover:opacity-30 ${item.bgColor.replace('/10', '')}`} />
<Card className="h-full flex flex-col overflow-hidden border-border/40 hover:border-border/80 transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 bg-card/30 backdrop-blur-xl relative group">
{/* Full card gradient overlay on hover */}
<div className={`absolute inset-0 bg-gradient-to-br ${item.bgColor.replace('bg-', 'from-').split('/')[0]}/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none z-0`} />
<div className="flex flex-col sm:flex-row h-full">
<div className="flex flex-col sm:flex-row h-full relative z-10">
{/* Image Section - Top on mobile, Left on desktop */}
<div className="relative w-full sm:w-2/5 h-64 sm:h-auto bg-gradient-to-br from-white/5 to-white/0 p-6 flex items-center justify-center shrink-0">
<div className="relative w-full h-full sm:w-40 sm:h-40 transition-transform duration-500 group-hover:scale-105">