Snigdha-OS/snigdhaos-web-dev
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/snigdhaos-web-dev.git synced 2025-09-05 21:06:37 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ style(_css): add zoom-in effects on the cards

Browse Source
This commit is contained in:
Eshan Roy
2024-12-17 13:34:53 +05:30
parent 1c9b0b9467
commit 3ec62e5aad
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/Home.tsx
View File

@@ -27,6 +27,13 @@ export function Home() {
background-size: 300% 300%; /* Makes the gradient larger for animation */
animation: gradientAnimation 15s ease infinite; /* Animates the gradient */
}
/* Card hover effect */
.card:hover {
transform: scale(1.05); /* Slight zoom-in effect */
transition: transform 0.3s ease-in-out; /* Smooth transition */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Adding subtle shadow */
}
`}
</style>
@@ -268,7 +275,7 @@ export function Home() {
}
const FeatureCard = ({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) => (
<div className="bg-white p-6 rounded-lg shadow-md text-center">
<div className="bg-white p-6 rounded-lg shadow-md text-center card">
<div className="mb-4">{icon}</div>
<h4 className="text-xl font-semibold text-indigo-700">{title}</h4>
<p className="text-gray-600 mt-2">{description}</p>
@@ -291,7 +298,7 @@ const ReasonCard = ({
title: string;
description: string;
}) => (
<div className="bg-white p-6 rounded-lg shadow-md text-center">
<div className="bg-white p-6 rounded-lg shadow-md text-center card">
<div className="mb-4">{icon}</div>
<h4 className="text-xl font-semibold text-indigo-700">{title}</h4>
<p className="text-gray-600 mt-2">{description}</p>