From 6d71eb13c1a4f967dbe3d0abcd3c169d973908a2 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 3 Feb 2025 08:22:01 +0100
Subject: [PATCH] hover transition added

---
 src/App.css                |  4 ++++
 src/components/HomeCom.jsx | 14 +++++++-------
 src/index.css              |  4 ++++
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/App.css b/src/App.css
index 3508c65..16fffbd 100644
--- a/src/App.css
+++ b/src/App.css
@@ -36,3 +36,7 @@
     transform: rotate(360deg);
   }
 }
+
+button, a {
+  cursor: pointer;
+}
diff --git a/src/components/HomeCom.jsx b/src/components/HomeCom.jsx
index 676f447..805cb8f 100644
--- a/src/components/HomeCom.jsx
+++ b/src/components/HomeCom.jsx
@@ -13,26 +13,26 @@ export default function HomeCom() {
         {data.map((item, index) => {
           let color = item.place == 'Friends' ? 'text-emerald-500 bg-emerald-100/90' : item.place == 'Office' ? 'text-blue-500 bg-blue-100/90' : 'text-orange-500 bg-orange-100/90'
           return (
-            <div key={index} className="w-full p-3 sm:p-5 bg-white shadow flex flex-col gap-5">
+            <div key={index} className="w-full p-3 sm:p-5 bg-white shadow flex flex-col gap-5 hover:scale-105">
               <div className="mb-5 card-title w-[70%] mx-auto">
                 <h1 className="mb-[1px] text-2xl font-bold">{item.name}</h1>
                 <span className={` ${color} text-sm font-bold p-1 rounded`}>{item.place}</span>
               </div>
               <div className="card-body flex flex-col gap-2">
-                <div className="contact text-slate-400 flex gap-3 items-center">
-                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-400">
+                <div className="contact text-slate-700 flex gap-3 items-center">
+                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                     <IoIosPhonePortrait />
                   </span>
                   <span>{item.contact}</span>
                 </div>
-                <div className="contact text-slate-400 flex gap-3 items-center">
-                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-400">
+                <div className="contact text-slate-700 flex gap-3 items-center">
+                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                     <CiPhone />
                   </span>
                   <span>{item.contact}</span>
                 </div>
-                <div className="contact text-slate-400 flex gap-3 items-center">
-                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-400">
+                <div className="contact text-slate-700 flex gap-3 items-center">
+                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                     <MdOutlineEmail />
                   </span>
                   <span>{item.email}</span>
diff --git a/src/index.css b/src/index.css
index 17df0e7..eb4dd04 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+*{
+  transition: all .3s;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',