[[enhanced]] Curious-Ecosystem#188

anuragnegi000 · May 30, 2024 · fe11b84 · fe11b84
1 parent 7383362
commit fe11b84
Showing 1 changed file with 28 additions and 12 deletions.
diff --git a/frontend/src/Components/Pages/Landing-Page/MeetingCards.jsx b/frontend/src/Components/Pages/Landing-Page/MeetingCards.jsx
@@ -9,7 +9,7 @@ import { Link } from 'react-router-dom';
 const MeetingCards = () => {
   return (
     <div className='flex flex-wrap gap-0 justify-center w-full text-cyan-50 text-2xl text-center'>
-      <IconContext.Provider value={{ size: '1.5em', className: 'global-class-name' }}>
+      <IconContext.Provider value={{ size: '1.8em', className: 'global-class-name' }}>
         <MeetingCard
           style={{ backgroundColor: '#ff742e' }}
           icon={<FaPlus />}
@@ -47,18 +47,34 @@ const MeetingCards = () => {
 export default MeetingCards;
 
 const MeetingCard = ({ style, icon, cardHeading, cardDesc }) => {
+  const [hovered, setHovered] = useState(false);
   return (
-    <div
-      style={style}
-      className="relative flex flex-col justify-center items-center w-48 m-3 rounded-2xl h-48 transition duration-500 ease-in-out transform hover:scale-90 cursor-pointer shadow-md"
-    >
-      <div className="absolute top-2 left-2">
-        {icon}
-      </div>
-      <div className="text-center">
-        <p className="font-black text-xl mb-3">{cardHeading}</p>
-        <p className="w-full font-medium text-xs text-gray-200">{cardDesc}</p>
+    <div>
+      <div
+        style={style}
+        className={`relative flex flex-col justify-center items-center w-48 m-3 rounded-2xl h-48 transition duration-500 ease-in-out transform hover:scale-90 cursor-pointer ${
+          hovered ? 'shadow-md' : ''
+        }`}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      >
+        <div
+          className={`absolute transition-all duration-300 ease-in-out ${
+            hovered ? 'top-2 left-2' : 'top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2'
+          }`}
+          style={{ fontSize:hovered? '0.7em':'1.6em' }}
+        >
+          {icon}
+        </div>
+        <div
+          className={`text-center transition-opacity ease-in-out duration-300 ${
+            hovered ? 'opacity-100' : 'opacity-0'
+          } absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`}
+        >
+          <p className='font-black text-xl mb-3'>{cardHeading}</p>
+          <p className='w-full font-medium text-xs text-gray-200'>{cardDesc}</p>
+        </div>
       </div>
     </div>
   );
-};
+};