Merge pull request #247 from anuragnegi000/main

enhanced the issue #188 Redesigning meeting cards for landing pages in the MeetingCard.jsx component
Curious-Ecosystem · May 30, 2024 · ced187a · ced187a
2 parents 697d429 + fe11b84
commit ced187a
Showing 1 changed file with 18 additions and 17 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.8em', className: 'global-class-name' }}>
         <MeetingCard
           style={{ backgroundColor: '#ff742e' }}
           icon={<FaPlus />}
@@ -53,25 +52,27 @@ const MeetingCard = ({ style, icon, cardHeading, cardDesc }) => {
     <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
+        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)}>
-        <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'
-          } `}>
+        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}
-        </p>
+        </div>
         <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 ${
+          className={`text-center transition-opacity ease-in-out duration-300 ${
             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>
+          } 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>