Snigdha-OS/Snigdha-OS.github.io
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/Snigdha-OS.github.io.git synced 2025-09-07 13:15:17 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ style: animation scale changes

Browse Source
This commit is contained in:
RiO
2024-12-29 04:34:12 +05:30
parent b3da144db0
commit 687740d610
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/home/FeatureCard.tsx
View File

@@ -14,15 +14,15 @@ export function FeatureCard({ title, description, icon: Icon, delay = 0 }: Featu
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay }} transition={{ duration: 0.6, delay }}
viewport={{ once: true }} viewport={{ once: true }}
whileHover={{ y: -5 }} whileHover={{ y: -5 }}
className="relative group" className="relative group"
> >
<div <div
className={clsx( className={clsx(
'rounded-xl bg-white/90 backdrop-blur-lg p-8 ring-1 ring-gray-200 hover:ring-cornflower-blue transition-all shadow-2xl hover:shadow-cornflower-blue/40 overflow-hidden flex flex-col justify-center items-center', 'rounded-xl bg-white/90 backdrop-blur-lg p-8 ring-1 ring-gray-200 hover:ring-cornflower-blue transition-all shadow-xl hover:shadow-cornflower-blue/40 overflow-hidden flex flex-col justify-center items-center',
'hover:scale-105 transform transition-all' 'hover:scale-105 transform transition-all duration-300'
)} )}
role="presentation" role="presentation"
> >
@@ -32,16 +32,20 @@ export function FeatureCard({ title, description, icon: Icon, delay = 0 }: Featu
{/* Icon centered with hover effect */} {/* Icon centered with hover effect */}
<div className="mb-6 flex justify-center items-center"> <div className="mb-6 flex justify-center items-center">
<Icon <Icon
className="h-12 w-12 text-cornflower-blue transition-all transform group-hover:scale-110" className="h-12 w-12 text-cornflower-blue transition-all transform group-hover:scale-110 group-hover:rotate-3"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
{/* Title with enhanced typography */} {/* Title with enhanced typography */}
<h3 className="text-2xl font-semibold text-gray-800 mb-3 text-center">{title}</h3> <h3 className="text-2xl font-semibold text-gray-800 mb-3 text-center capitalize leading-tight">
{title}
</h3>
{/* Description with improved readability */} {/* Description with improved readability */}
<p className="text-lg text-gray-600 text-center">{description}</p> <p className="text-lg text-gray-600 text-center mt-2 px-4">
{description}
</p>
</div> </div>
</motion.div> </motion.div>
); );