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 04:35:18 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ style: improve animation

Browse Source
This commit is contained in:
eshanized
2025-01-06 19:39:50 +05:30
parent acd6990bc7
commit 0b0b502928
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/home/ToolsShowcase.tsx
View File

@@ -35,14 +35,18 @@ export function ToolsShowcase() {
ease: "easeOut", ease: "easeOut",
}} }}
whileHover={{ whileHover={{
scale: 1.08, scale: 1.1,
boxShadow: "0 15px 30px rgba(0, 0, 0, 0.15)", rotate: 1,
boxShadow: "0 20px 40px rgba(0, 0, 0, 0.2)",
}} }}
className="flex flex-col items-center p-8 bg-white rounded-xl shadow-md hover:shadow-xl transition-transform duration-300" className="flex flex-col items-center p-8 bg-white rounded-xl shadow-md hover:shadow-2xl transition-transform duration-300"
aria-label={tool.name}
> >
{/* Icon Section */} {/* Icon Section */}
<div className="p-4 bg-gradient-to-br from-cornflower-blue/10 to-cornflower-blue/30 rounded-full shadow-inner mb-6"> <div
<tool.icon className={`h-14 w-14 ${tool.color} transition-all`} /> className={`p-6 rounded-full shadow-inner bg-gradient-to-br from-gray-100 via-gray-50 to-gray-200 mb-6 transition-transform`}
>
<tool.icon className={`h-14 w-14 ${tool.color}`} />
</div> </div>
{/* Tool Name */} {/* Tool Name */}
<h3 className="text-xl font-semibold text-gray-800">{tool.name}</h3> <h3 className="text-xl font-semibold text-gray-800">{tool.name}</h3>