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-06 12:45:18 +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
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay }}
transition={{ duration: 0.6, delay }}
viewport={{ once: true }}
whileHover={{ y: -5 }}
className="relative group"
>
<div
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',
'hover:scale-105 transform transition-all'
'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 duration-300'
)}
role="presentation"
>
@@ -32,16 +32,20 @@ export function FeatureCard({ title, description, icon: Icon, delay = 0 }: Featu
{/* Icon centered with hover effect */}
<div className="mb-6 flex justify-center items-center">
<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"
/>
</div>
{/* 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 */}
<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>
</motion.div>
);