From df91be7e3e2f9a7913c907fdfc1d5836be31315e Mon Sep 17 00:00:00 2001
From: d3v1l0n <d3v1l0n@outlook.in>
Date: Sun, 29 Dec 2024 04:27:16 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20animation=20smoothness=20?=
 =?UTF-8?q?optimixation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/FeatureCard.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/home/FeatureCard.tsx b/src/components/home/FeatureCard.tsx
index a9c6b81f..cb7a9edf 100644
--- a/src/components/home/FeatureCard.tsx
+++ b/src/components/home/FeatureCard.tsx
@@ -1,5 +1,6 @@
 import { motion } from 'framer-motion';
 import { LucideIcon } from 'lucide-react';
+import clsx from 'clsx'; // Optional, for cleaner class management
 
 interface FeatureCardProps {
   title: string;
@@ -18,18 +19,27 @@ export function FeatureCard({ title, description, icon: Icon, delay = 0 }: Featu
       whileHover={{ y: -5 }}
       className="relative group"
     >
-      <div className="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">
+      <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'
+        )}
+        role="presentation"
+      >
         {/* Hover gradient overlay */}
         <div className="absolute inset-0 bg-gradient-to-r from-cornflower-blue/0 to-cornflower-blue/0 group-hover:from-cornflower-blue/10 group-hover:to-cornflower-blue/20 transition-all ease-in-out" />
 
         {/* 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-105" />
+          <Icon
+            className="h-12 w-12 text-cornflower-blue transition-all transform group-hover:scale-110"
+            aria-hidden="true"
+          />
         </div>
 
         {/* Title with enhanced typography */}
-        <h3 className="text-2xl font-bold text-gray-900 mb-3 text-center">{title}</h3>
-        
+        <h3 className="text-2xl font-semibold text-gray-800 mb-3 text-center">{title}</h3>
+
         {/* Description with improved readability */}
         <p className="text-lg text-gray-600 text-center">{description}</p>
       </div>