style: change visual elements

This commit is contained in:
RiO
2024-12-25 06:39:05 +05:30
parent aabb76dd9b
commit 014fad7cd8

View File

@@ -11,15 +11,18 @@ export function DownloadButton({ version, size, url }: DownloadButtonProps) {
return (
<motion.a
href={url}
whileHover={{ scale: 1.02 }}
target="_blank" // Opens the link in a new tab
rel="noopener noreferrer" // Security measure when opening external links
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.98 }}
className="flex items-center justify-between w-full p-4 bg-white/80 backdrop-blur-sm rounded-lg border border-gray-200 hover:border-cornflower-blue transition-colors"
className="flex items-center justify-between w-full p-4 bg-gradient-to-r from-cornflower-blue/10 to-white rounded-lg border border-gray-200 hover:border-cornflower-blue transition-all duration-300 ease-in-out transform hover:scale-105 focus:ring-2 focus:ring-cornflower-blue focus:outline-none"
aria-label={`Download Snigdha OS ${version} - ${size}`} // Accessible label
>
<div>
<h3 className="font-semibold text-gray-900">Snigdha OS {version}</h3>
<div className="flex flex-col">
<h3 className="text-lg font-semibold text-gray-900">Snigdha OS {version}</h3>
<p className="text-sm text-gray-500">{size}</p>
</div>
<Download className="h-5 w-5 text-cornflower-blue" />
<Download className="h-6 w-6 text-cornflower-blue" />
</motion.a>
);
}
}