ui: make orange left-border hover effect apply dynamically to all cards

This commit is contained in:
Devesh S
2026-07-23 11:36:41 +05:30
parent 0e63fb40e7
commit 1c8c6c066b

View File

@@ -456,14 +456,10 @@ export default function Community() {
return ( return (
<StaggerItem key={q.id}> <StaggerItem key={q.id}>
<motion.div <motion.div
whileHover={{ y: -2, boxShadow: '0 8px 30px -4px rgba(0,0,0,0.08)', borderColor: '#CBD5E1' }} whileHover={{ y: -2, boxShadow: '0 12px 30px -4px rgba(249,115,22,0.08)' }}
onClick={() => handleCardClick(q.id)} onClick={() => handleCardClick(q.id)}
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
className={`bg-white border rounded-2xl p-4 transition-all duration-300 cursor-pointer ${ className="bg-white border border-[#E5E7EB] border-l-4 border-l-transparent rounded-2xl p-4 transition-all duration-300 cursor-pointer hover:border-l-[#F97316]"
isFeatured
? 'border-l-4 border-l-[#F97316] border-[#E5E7EB]'
: 'border-[#E5E7EB]'
}`}
style={{ boxShadow: '0 2px 12px -3px rgba(0,0,0,0.05)' }} style={{ boxShadow: '0 2px 12px -3px rgba(0,0,0,0.05)' }}
> >
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">