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

✨ style: change the card style

Browse Source
This commit is contained in:
RiO
2024-12-25 06:31:33 +05:30
parent 5128cf55df
commit ebe88e4292
1 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/features/ToolCard.tsx
View File

@@ -13,20 +13,23 @@ export function ToolCard({ name, description, category, command }: ToolCardProps
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
whileHover={{ y: -5 }} whileHover={{ scale: 1.05, y: -5 }}
className="bg-white/80 backdrop-blur-sm p-6 rounded-lg shadow-sm border border-gray-100" transition={{ duration: 0.3 }}
className="bg-gradient-to-r from-cornflower-blue/10 to-white p-6 rounded-lg shadow-lg border border-gray-100 transform hover:shadow-2xl transition-all"
> >
<div className="flex items-center gap-3 mb-3"> <div className="flex items-center gap-4 mb-4">
<Terminal className="h-5 w-5 text-cornflower-blue" /> <div className="p-3 bg-cornflower-blue/20 rounded-full">
<h3 className="text-lg font-semibold text-gray-900">{name}</h3> <Terminal className="h-6 w-6 text-cornflower-blue" />
</div>
<h3 className="text-2xl font-semibold text-gray-900">{name}</h3>
</div> </div>
<p className="text-gray-600 mb-4">{description}</p> <p className="text-gray-600 text-lg mb-4">{description}</p>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-sm font-medium text-cornflower-blue">{category}</span> <span className="text-sm font-medium text-cornflower-blue">{category}</span>
<code className="text-sm bg-gray-100 px-2 py-1 rounded">{command}</code> <code className="text-sm bg-gray-100 px-3 py-1 rounded">{command}</code>
</div> </div>
</motion.div> </motion.div>
); );
} }