From 687740d6105d0e704ca31a99faef877ff1b6de26 Mon Sep 17 00:00:00 2001
From: d3v1l0n <d3v1l0n@outlook.in>
Date: Sun, 29 Dec 2024 04:34:12 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20style:=20animation=20scale=20change?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/FeatureCard.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/home/FeatureCard.tsx b/src/components/home/FeatureCard.tsx
index cb7a9edf..b2337fae 100644
--- a/src/components/home/FeatureCard.tsx
+++ b/src/components/home/FeatureCard.tsx
@@ -14,15 +14,15 @@ export function FeatureCard({ title, description, icon: Icon, delay = 0 }: Featu
     <motion.div
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.5, delay }}
+      transition={{ duration: 0.6, delay }}
       viewport={{ once: true }}
       whileHover={{ y: -5 }}
       className="relative group"
     >
       <div
         className={clsx(
-          'rounded-xl bg-white/90 backdrop-blur-lg p-8 ring-1 ring-gray-200 hover:ring-cornflower-blue transition-all shadow-2xl hover:shadow-cornflower-blue/40 overflow-hidden flex flex-col justify-center items-center',
-          'hover:scale-105 transform transition-all'
+          'rounded-xl bg-white/90 backdrop-blur-lg p-8 ring-1 ring-gray-200 hover:ring-cornflower-blue transition-all shadow-xl hover:shadow-cornflower-blue/40 overflow-hidden flex flex-col justify-center items-center',
+          'hover:scale-105 transform transition-all duration-300'
         )}
         role="presentation"
       >
@@ -32,16 +32,20 @@ export function FeatureCard({ title, description, icon: Icon, delay = 0 }: Featu
         {/* Icon centered with hover effect */}
         <div className="mb-6 flex justify-center items-center">
           <Icon
-            className="h-12 w-12 text-cornflower-blue transition-all transform group-hover:scale-110"
+            className="h-12 w-12 text-cornflower-blue transition-all transform group-hover:scale-110 group-hover:rotate-3"
             aria-hidden="true"
           />
         </div>
 
         {/* Title with enhanced typography */}
-        <h3 className="text-2xl font-semibold text-gray-800 mb-3 text-center">{title}</h3>
+        <h3 className="text-2xl font-semibold text-gray-800 mb-3 text-center capitalize leading-tight">
+          {title}
+        </h3>
 
         {/* Description with improved readability */}
-        <p className="text-lg text-gray-600 text-center">{description}</p>
+        <p className="text-lg text-gray-600 text-center mt-2 px-4">
+          {description}
+        </p>
       </div>
     </motion.div>
   );