From 3ec62e5aada0715ca6788c380d7e616840dbbbd4 Mon Sep 17 00:00:00 2001
From: Eshan Roy <m.eshanized@gmail.com>
Date: Tue, 17 Dec 2024 13:34:53 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20style(=5Fcss):=20add=20zoom-in=20ef?=
 =?UTF-8?q?fects=20on=20the=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Home.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 34327f2..89c9579 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -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>