[[Fixes]] Curious-Ecosystem#188 Redesigning of cards

anuragnegi000 · May 21, 2024 · 916382f · 916382f
1 parent 3d80822
commit 916382f
Showing 1 changed file with 13 additions and 28 deletions.
diff --git a/frontend/src/Components/Pages/Landing-Page/MeetingCards.jsx b/frontend/src/Components/Pages/Landing-Page/MeetingCards.jsx
@@ -8,9 +8,8 @@ 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: '3em', className: 'global-class-name' }}>
+    <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' }}>
         <MeetingCard
           style={{ backgroundColor: '#ff742e' }}
           icon={<FaPlus />}
@@ -48,32 +47,18 @@ const MeetingCards = () => {
 export default MeetingCards;
 
 const MeetingCard = ({ style, icon, cardHeading, cardDesc }) => {
-  const [hovered, setHovered] = useState(false);
   return (
-    <div>
-      <div
-        style={style}
-        className={`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' : style.backgroundColor
-        }`}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}>
-        <p
-          className={`text-center text-xl absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition-opacity duration-200 ease-in-out ${
-            hovered ? 'opacity-0' : 'opacity-100'
-          } `}>
-          {icon}
-        </p>
-        <div
-          className={`text-center  transition-opacity ease-in-out duration-300 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 ${
-            hovered ? 'opacity-100' : 'opacity-0'
-          }`}>
-          <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 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>
   );
-};
+};